[SVG] Для красоты главной страницы я решил изучить SVG

внешний интерфейс SVG
[SVG] Для красоты главной страницы я решил изучить SVG

«Это третий день моего участия в ноябрьском испытании обновлений. Подробную информацию об этом событии см.:Вызов последнего обновления 2021 г.".

[SVG] Для красоты главной страницы я решил изучить SVG

Описание блога

Информация, содержащаяся в статье, получена из Интернета и личного резюме, которое предназначено для обобщения личного обучения и опыта.Если есть какие-либо нарушения, пожалуйста, свяжитесь со мной, чтобы удалить ее, спасибо!

иллюстрировать

В процессе самостоятельного изучения раньше SVG всегда был очень глубоким и не осмелился его трогать, но если вы хотите его понять, вы все-таки придете к этому моменту. :blush: Как бы сложно это ни казалось, технология накапливается из простых точек знаний.

Что такое СВГ?

  • SVG означает масштабируемую векторную графику.

  • Он определяет изображения с использованием формата XML.

  • Изображения SVG можно увеличивать или изменять их размер без потери графического качества.

  • SVG — это стандарт консорциума World Wide Web.

  • SVG является неотъемлемой частью стандартов W3C, таких как DOM и XSL.

В общем, SVG — это файл, определяемый XML, поскольку это векторная графика, качество ее графики очень высокое.

Поскольку SVG представляет собой XML-файл, изображения SVG можно создавать в любом текстовом редакторе, но сложная графика по-прежнему требует инструментов редактирования графики.

Преимущества SVG

  • SVG можно читать и изменять многими инструментами (например, Блокнотом).
  • SVG меньше по размеру и более сжимаем, чем изображения JPEG и GIF.
  • SVG масштабируется.
  • Изображения SVG можно печатать с высоким качеством при любом разрешении.
  • SVG можно масштабировать без потери качества изображения.
  • Текст в изображениях SVG является необязательным и доступным для поиска (отлично подходит для карт).
  • SVG — это открытый стандарт.
  • Файлы SVG представляют собой чистый XML.

Основным конкурентом SVG является Flash. Самым большим преимуществом SVG перед Flash является совместимость с другими стандартами, такими как XSL и DOM. Flash, с другой стороны, является проприетарной технологией, исходный код которой закрыт.

небольшой пример

образец кода
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>
Эффект

image-20211110141218557

Разбор кода
  • <xml>Первая строка содержит объявление XML.
  • Атрибут standalone указывает, является ли этот SVG-файл «автономным» или содержит ссылку на внешний файл, standalone="no" означает, что документ SVG ссылается на внешний файл — в данном случае на файл DTD.
  • <svg>和</svg>это код SVG, эквивалентный открывающему и закрывающему тегам, который является корневым элементом.
  • Свойства ширины и высоты задают ширину и высоту этого документа SVG.
  • Атрибут версии определяет используемую версию SVG.
  • Атрибут xmlns определяет пространство имен SVG.
  • <circle> Используется для создания круга. Свойства cx и cy определяют координаты x и y центра круга. Если эти два свойства опущены, точка будет установлена ​​на (0, 0). Атрибут r определяет радиус круга.
  • Свойства штриха и ширины штриха управляют отображением контура фигуры. Мы устанавливаем контур круга шириной 2 пикселя с черной рамкой.
  • Свойство fill задает цвет внутри фигуры. Цвет заливки устанавливаем красный.
  • Что делает закрывающий тег, так это закрывает элемент SVG и сам документ.

Примечание. Все открытые теги должны иметь закрывающие теги!

Как использовать SVG в HTML?

Существует 5 способов встроить файл SVG в документ HTML:<img>,<embed>,<object> ,<iframe>, встроенный непосредственно в HTML-код.

использовать<img>Этикетка

Представлены в виде картинок, фонов

грамматика:

<img src="circle1.svg" alt=""/>
использовать<embed>Этикетка
  • Преимущества: поддерживается всеми основными браузерами и позволяет использовать скрипты.
  • Минусы: не рекомендуется в HTML4 и XHTML (но разрешено в HTML5).

грамматика:

<embed src="circle1.svg" type="image/svg+xml" />
использовать<object> Этикетка
  • Преимущества: Поддерживается всеми основными браузерами и поддерживает стандарты HTML4, XHTML и HTML5.
  • Минусы: скрипты не допускаются.

грамматика:

<object data="circle1.svg" type="image/svg+xml"></object>
использовать<iframe>Этикетка
  • Преимущества: поддерживается всеми основными браузерами и позволяет использовать скрипты.
  • Минусы: не рекомендуется в HTML4 и XHTML (но разрешено в HTML5).

грамматика:

<iframe src="circle1.svg"></iframe>
Встраивайте код SVG прямо в HTML
  • Преимущества: простота в эксплуатации, динамическая регулировка
  • Недостатки: HTML-страницы слишком многословны и неудобны для кодирования.

грамматика:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

Основные формы SVG

прямоугольник<rect>

Пример 1:

нормальный прямоугольник

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" style="fill:rgb(122,122,0);stroke-width:2;stroke:rgb(0,0,0)" />
</svg>

Эффект:

image-20211110160850204

Анализ кода:

  • Свойства ширины и высоты прямоугольного элемента определяют высоту и ширину прямоугольника.
  • Атрибут стиля используется для определения свойств CSS.
  • Свойство заполнения CSS определяет цвет заливки прямоугольника (значение RGB, имя цвета или шестнадцатеричное значение).
  • Свойство CSS stroke-width определяет ширину границы прямоугольника.
  • Свойство CSS Stroke определяет цвет границы прямоугольника.

Пример второй:

Прозрачность заливок и границ

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.5;stroke-opacity:0.5" />
</svg>

Эффект:

image-20211110163102077

Анализ кода:

  • Атрибут x определяет левую позицию прямоугольника (например, x="0" определяет, что прямоугольник находится на расстоянии 0 пикселей от левой стороны окна браузера).
  • Атрибут y определяет верхнюю позицию прямоугольника (например, y="0" определяет, что прямоугольник находится на расстоянии 0 пикселей от верхней части окна браузера).
  • Свойство CSS fill-opacity определяет непрозрачность цвета заливки (допустимый диапазон: 0–1).
  • Свойство CSS stroke-opacity определяет непрозрачность цвета контура (допустимый диапазон: 0–1).

Пример третий:

Прозрачность всего элемента

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
  <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.4" />
</svg>

Эффект:

image-20211110162824824

Анализ кода:

  • Свойство CSS opacity используется для определения значения прозрачности элемента (диапазон: от 0 до 1).

Пример четвертый:

Прямоугольник с закругленными углами

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="160" style="fill:red;stroke:black;stroke-width:1;opacity:0.5" />
</svg>

Эффект:

image-20211110163832986

Анализ кода:

  • Свойства rx и ry делают прямоугольники закругленными.
круглый<circle>

Пример:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="red" stroke-width="2" fill="blue" />
</svg>

Эффект:

image-20211110164224132

Анализ кода:

  • Тег круга можно использовать для создания круга.
  • Свойства cx и cy определяют координаты x и y точки. Если cx и cy опущены, центр окружности будет установлен в (0, 0)
  • Атрибут r определяет радиус круга
овал<ellipse>

Пример:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;stroke:purple;stroke-width:2" />
</svg>

Эффект:

image-20211110165550106

Анализ кода:

  • Тег ellipse может использоваться для создания эллипса.
  • Координата x центра эллипса, определяемая свойством CX.
  • Y-координата центра эллипса, определенного атрибутом CY
  • Горизонтальный радиус, определяемый свойством RX
  • Вертикальный радиус, определяемый атрибутом RY
Нить <line>

Пример:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:5" />
</svg>

Эффект:

image-20211110170518961

Анализ кода:

  • Тег линии можно использовать для создания прямой линии.
  • Свойство x1 определяет начало линии на оси x.
  • Атрибут y1 определяет начало линии по оси Y.
  • Свойство x2 определяет конец линии на оси x.
  • Атрибут y2 определяет конец линии по оси Y.
Полилиния <polyline>

Пример первый:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,10 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>

Эффект:

image-20211110170934450

Анализ кода:

  • полилиния используется для создания любой формы только с прямыми линиями
  • точки - это набор точек

Пример второй:

нарисовать пентаграмму

<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="100 10,40 180,190 60,10 60,160 180" style="fill:blue;stroke:blue;stroke-width:1" />
</svg>

Эффект:

image-20211110171931827

Анализ кода:

Заполнение пробела используется, потому что отрезок линии не замкнут

многоугольник <polygon>

Пример первый:

<svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:red;stroke:purple;stroke-width:1"/>
</svg>

Эффект:

image-20211110173241294

Анализ кода:

  • Тег многоугольника используется для создания графики как минимум с тремя сторонами.
  • точки - это набор точек

Пример второй:

нарисовать пентаграмму

<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="100 10,40 180,190 60,10 60,160 180" style="fill:none;stroke:black;stroke-width:5"/>
</svg>

Эффект:

image-20211110173634068

Анализ кода:

Последняя точка будет закрыта автоматически, что также является отличием от полилинии.

дорожка<path>

Данные пути:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

Пример:

нарисовать треугольник

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L205 270 Z" />
</svg>

Эффект:

image-20211110174112019

Анализ кода:

Определяется путь, который начинается в позиции 150 0, достигает позиции 75 200, затем начинается оттуда в 205 270 и, наконец, замыкает путь в позиции 150 0.

Суммировать

Основы SVG были введены, но использование путей только началось, позже я подробно расскажу о путях и, конечно, о некоторых «продвинутых» атрибутах SVG.

Фактически, проработав весь путь, я обнаружил, что работа SVG примерно аналогична принципу использования PS, AI и других инструментов рисования, что также помогает нам понять отрисовку такой графики.

Статьи по Теме

【SVG】Смертельное оружие SVG—путь

благодарный

универсальная сеть

учебник для новичков

и трудолюбивый сам,личный блог,GitHub-тест,GitHub

Официальный аккаунт - Guizimo, мини-программа - блог Xiaogui

Категории