[Перевод] SVG простыми словами

JavaScript Программа перевода самородков SVG CSS
[Перевод] SVG простыми словами

Подробная информация о SVG

SVG — отличный и невероятно мощный формат изображений. Этот учебник дает вам обзор SVG, просто объясняя все, что вам нужно знать.

представлять

Несмотря на стандартизацию в начале 2000-х, SVG (Scalable Vector Graphicsаббревиатура) является горячей темой в последние годы.

SVG годами страдал плохой поддержкой браузеров (особенно IE).

Я нашел эту цитату из книги 2011 года: на момент написания статьи встраивание SVG непосредственно в HTML работало только в последних браузерах. Спустя 7 лет фраза теперь в прошлом, и мы можем смело использовать SVG-изображения.

Теперь мы можем безопасно использовать изображения SVG, если у вас нет большого количества пользователей в IE8 и ниже или на старых устройствах Android. В этом случае еще есть альтернативы.

SVG 支持的浏览器

Частью успеха SVG является тот факт, что мы должны поддерживать различные экраны с разными разрешениями и размерами. SVG отлично решает эту проблему.

Между тем, быстрый спад Flash за последние несколько лет привел к интересу к SVG. Это очень важно для многих вещей, которые Flash делал в прошлом.

SVG — этоvectorФормат файла изображения. Это сильно отличает их от других форматов изображений, таких как PNG, GIF или JPG, которые являются форматами файлов растровых изображений.

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

Поскольку изображения SVG являются векторными изображениями, вы можетебесконечный зум, и нет проблем с ухудшением качества изображения. Почему это так? Поскольку используются изображения SVGXML-разметкаВстроенный браузер печатает каждую точку и линию, рисуя их, а не заполняя определенные места предопределенными пикселями. Это гарантирует, что изображения SVG могут адаптироваться к разным размерам и разрешениям экрана, даже к тем, которые еще не изобретены.

Поскольку они определены в XML, изображения SVG более компактны, чем изображения JPG или PNG.гибкий,а такжеМы можем взаимодействовать с ними с помощью CSS и JavaScript.. Настройки изображения SVG можноВключатьCSS и JavaScript.

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

SVG прост, когда дело доходит до анимации, а это действительно крутая тема.

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

SVG — это просто текст, поэтому его можно эффективно сжать с помощью GZip.

Ваше первое изображение SVG

Изображения SVG определяются с помощью XML, а это означает, что если вы хорошо разбираетесь в HTML, SVG будет выглядеть очень знакомо, за исключением того, что в SVG есть теги, подходящие для создания документов (например,p,article,footer,aside) у нас также есть строительные блоки для векторных диаграмм:path,rect,lineи т.п.

Вот пример SVG-изображения:

<svg width="10" height="10">
  <rect x="0" y="0" width="10" height="10" fill="blue" />
</svg>

Обратите внимание, как легко читать и понимать изображение: это простой синий прямоугольник размером 10 x 10 пикселей (ячейка по умолчанию).

По большей части вам не нужно писать код SVG, потому что вы можете использовать такие инструменты, как Sketch или Figma, или любой другой инструмент векторной графики, чтобы создать изображение и экспортировать его в формате SVG.

Текущая версия SVG — 1.1, а SVG 2.0 находится в стадии разработки.

Используйте SVG

Браузеры могут сделать это, включив их вimgSVG Image Чтобы отобразить метку:

<img src="image.svg" alt="My SVG image" />

Как и другие форматы изображения на основе пикселей:

<img src="image.png" alt="My PNG image" />
<img src="image.jpg" alt="My JPG image" />
<img src="image.gif" alt="My GIF image" />
<img src="image.webp" alt="My WebP image" />

Кроме того, SVG настолько уникальны, что их можно включать непосредственно в HTML-страницы:

<!DOCTYPE html>
<html>
  <head>
    <title>A page</title>
  </head>
  <body>
    <svg width="10" height="10">
      <rect x="0" y="0" width="10" height="10" fill="blue" />
    </svg>
  </body>
</html>

Обратите внимание, что HTML5 и XHTML требуют разного синтаксиса для встроенных изображений SVG. К счастью, XHTML ушел в прошлое, потому что он слишком сложен, но о нем стоит знать, если вам все еще нужно иметь дело со страницами XHTML.

Встроенный SVG в HTLMфункции, которые делают этот формат сценарнымunicorn, поскольку другие изображения не могут этого сделать, для каждого изображения необходимо открывать отдельный запрос для получения формата.

SVG-элемент

В приведенном выше примере вы видитеrectиспользование элемента. SVG имеет много разных элементов.

Наиболее часто используются

  • text: создать текстовый элемент
  • circle: создать круг
  • rect: создать прямоугольник
  • line: создать линию
  • path: создать путь между двумя точками
  • textPath: создает путь между двумя точками и создает текстовый элемент ссылки.
  • polygon: позволяет создавать полигоны любого типа
  • g: один элемент

Координаты начинаются с 0, 0 в верхнем левом углу области рисования ислева направовыражатьx, сверху донизувыражатьy.

Изображение, которое вы видите, отражает код, показанный выше. использоватьБраузер DevTools, вы можете проверить и изменить их.

text

textЭлемент добавляет текст. Текст можно выделить мышью.xа такжеyОпределяет начальную точку текста.

<svg>
  <text x="5" y="30">A nice rectangle</text>
</svg>
красивый прямоугольник

circle

Дайте определение окружности.cxа такжеcyкоордината центра,rэто радиус.fillявляется общим свойством, которое представляет цвет графика.

<svg>
  <circle cx="50" cy="50" r="50" fill="#529fca" />
</svg>

rect

Определите прямоугольник.x,yначальная координата,widthа такжеheightне требует пояснений.

<svg>
  <rect x="0" y="0" width="100" height="100" fill="#529fca" />
</svg>

line

x1а такжеy1Задайте начальные координаты.x2а такжеy2Задайте конечные координаты.strokeявляется общим свойством, представляющим цвет линии.

<svg>
  <line x1="0" y1="0" x2="100" y2="100" stroke="#529fca" />
</svg>

path

Путь представляет собой серию прямых линий и кривых. Это самый мощный из всех инструментов рисования SVG и, следовательно, самый сложный.

dСодержит команды направления. Эти команды начинаются с имени команды и набора координат:

  • MПредставляет движение, принимает набор координат x,y
  • LУказывает, что линия будет рисоваться до тех пор, пока она не примет набор x,y
  • Hэто горизонтальная линия, она принимает только координаты x
  • Vэто вертикальная линия, она принимает только координаты y
  • ZУказывает закрыть путь и вернуть его в исходное положение.
  • AУказывает на Arch, который сам нуждается в полном туториале.
  • Qпредставляет собой квадратичную кривую Безье, которая сама по себе нуждается в полном руководстве
<svg height="300" width="300">
  <path d="M 100 100 L 200 200 H 10 V 40 H 70"
        fill="#59fa81" stroke="#d85b49" stroke-width="3" />
</svg>

textPath

Добавьте текст вдоль формы элемента пути.

Wow such a nice SVG tut

polygon

использоватьpolygonНарисуйте любой многоугольник.pointsПредставляет набор координат x, y многоугольника, который должен быть связан:

<svg>
  <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" />
</svg>

g

использоватьgэлементы, вы можете сгруппировать несколько элементов:

<svg width="200" height="200">
  <rect x="0" y="0" width="100" height="100" fill="#529fca" />
  <g id="my-group">
    <rect x="0" y="100" width="100" height="100" fill="#59fa81" />
    <rect x="100" y="0" width="100" height="100" fill="#59fa81" />
  </g>
</svg>

Окно просмотра SVG и viewBox

Размер SVG относительно его контейнера определяетсяsvgэлементальwidthа такжеheightнастройки свойств. Единицей измерения по умолчанию являются пиксели, но вы можете использовать любые другие распространенные единицы измерения, например%илиem. Этоviewport.

Обычно «контейнер» относится к окну браузера, ноsvgЭлементы могут содержать другиеsvgэлемент, в данном случае контейнер является родительским элементомsvg.

Важным свойством являетсяviewBox. Это позволяет вам определить новую систему координат на холсте SVG.

Предполагая простой круг в SVG 200x200px:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="100" fill="#529fca" />
</svg>

указавviewBox,ты можешь выбратьПоказать только часть этого SVG. Например, вы можете начать с 0,0 и просто показать холст размером 100 x 100 пикселей:

<svg width="200" height="200" viewBox="0 0 100 100">
  <circle cx="100" cy="100" r="100" fill="#529fca" />
</svg>

От 100 100 вы увидите другую часть, правый нижний угол круга:

<svg width="200" height="200" viewBox="100 100 100 100">
  <circle cx="100" cy="100" r="100" fill="#529fca" />
</svg>

Хороший способ визуализации — представить Карты Google как гигантское изображение SVG, а ваш браузер — как окно просмотра размером с ваше окно. При перемещении окно просмотра меняет координаты своей начальной точки (x,y), а когда вы изменяете размер окна, изменяется ширина и высота окна просмотра.

Вставка SVG на веб-страницы

Есть несколько способов добавить SVG на веб-страницу.

Наиболее распространенными являются:

  • с участиемimgЭтикетка
  • с CSSbackground-imageАтрибуты
  • Встроенный в HTML
  • с участиемobject,iframeилиembedЭтикетка

Посмотрите эти примеры на Glitchflavio-svg-loading-ways.glitch.me/

с участиемimgЭтикетка

<img src="flag.svg" alt="Flag" />

с CSSbackground-imageАтрибуты

<style>
.svg-background {
  background-image: url(flag.svg);
  height: 200px;
  width: 300px;
}
</style>
<div class="svg-background"></div>

Встроенный в HTML

<svg width="300" height="200" viewBox="0 0 300 200"
    version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Italian Flag</title>
  <desc>By Flavio Copes https://flaviocopes.com</desc>
  <g id="flag">
      <rect fill="green" x="0" y="0" width="100" height="200"></rect>
      <rect fill="white" x="100" y="0" width="100" height="200"></rect>
      <rect fill="red" x="200" y="0" width="100" height="200"></rect>
  </g>
</svg>

с участиемobject,iframeилиembedЭтикетка

<object data="flag.svg" type="image/svg+xml"></object>

<iframe src="flag.svg" frameborder="0"></iframe>

<embed src="flag.svg" type="" />

использоватьembed, вы можете получить документ SVG из родительского документа с помощью

document.getElementById('my-svg-embed').getSVGDocument()

Внутри SVG вы можете ссылаться на родительский документ следующими способами:

window.parent.document

Встроенный SVG с URL-адресом данных

Вы можете использовать любую комбинацию приведенных выше примеров.Data URLsВстроить SVG в HTML:

<img src="data:image/svg+xml;<DATA>" alt="Flag" />

<object data="data:image/svg+xml;<DATA>" type="image/svg+xml"></object>

<iframe data="data:image/svg+xml;<DATA>" frameborder="0"></iframe>

Также в CSS:

.svg-background {
  background-image: url("data:image/svg+xml;<DATA>");
}

Просто используйте соответствующиеData URLИзменять<DATA>.

элемент стиля

Допустим любой элемент SVGstyleатрибуты, как HTML-теги. Не все свойства CSS работают так, как вы ожидаете. Например, чтобы изменить цвет текстового элемента, используйтеfillвместоcolor.

<svg>
  <text x="5" y="30" style="fill: green">A nice text</text>
</svg>

<svg>
  <text x="5" y="70" style="fill: green; font-family: Courier New">
    A nice text
  </text>
</svg>

Вы также можете использоватьfillКак атрибут элемента, как вы видели ранее:

<svg>
  <text x="5" y="70" fill="green">A nice text</text>
</svg>

Другие общественные свойства включают

  • fill-opacity, непрозрачность цвета фона
  • stroke, который определяет цвет границы
  • stroke-width, установить ширину границы

CSS может ориентироваться на элементы SVG так же, как вы ориентируетесь на HTML-теги:

rect {
  fill: red;
}
circle {
  fill: blue;
}

Взаимодействие с CSS или JavaScript с SVG

Изображения SVG могут быть оформлены с помощью CSS или написаны с помощью JavaScript, в этом случае:

  • Когда SVG встроен в HTML
  • пройти черезobject,embedилиiframeКогда тег загружает изображение

Но (⚠️ зависит от реализации браузера) они должны быть загружены из одного и того же домена (и протокола), что связано с политикой одного и того же происхождения.iframeНеобходимы явно заданные размеры, иначе содержимое будет обрезано при изменении размера.objectа такжеembedразмер, чтобы соответствовать его содержимому. .

Если используется SVGimgтег загружен или с CSS в качестве фона, независимо от источника:

  • CSS и JavaScript не могут с ним взаимодействовать
  • JavaScript, включенный в SVG, отключен
  • Невозможно загрузить ресурсы извне (например, изображения, таблицы стилей, скрипты, шрифты)

деталь

характеристика SVG встроенный object/embed/iframe img
Может взаимодействовать с пользователями ✅ ✅ ✅
Поддержка анимации ✅ ✅ ✅
Может запускать скрипты JavaScript ✅ ✅ 👎🏼
Может быть запрограммирован извне ✅ 👎🏼 👎🏼

Встроенные изображения SVG, несомненно, являются наиболее мощными и гибкими, и это единственный способ что-то сделать с SVG.

Если вы хотите SVG сообщать о любом взаимодействии с вашим сценарием, он должен быть загружен в HTML встроенному способу..

Если вам не нужно взаимодействовать с SVG, просто отобразите его на странице, загрузите SVG вimg,objectилиembedЗагрузка SVG особенно удобна, если вы повторно используете изображения SVG на разных страницах или если размер изображения SVG довольно велик.

CSS Встроить SVG

Добавьте CSS в CDATA:

<svg>
  <style>
    <![CDATA[
      #my-rect { fill: blue; }
    ]]>
  </style>
  <rect id="my-rect" x="0" y="0" width="10" height="10" />
</svg>

Файлы SVG также могут включать внешние таблицы стилей.

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width=".." height=".." viewBox="..">
  <rect id="my-rect" x="0" y="0" width="10" height="10" />
</svg>

JavaScript встраивает SVG

Вы можете поставить JavaScript на первое место и обернуть его вloadсобытие для его выполнения, когда страница полностью загружена и SVG вставлен в DOM:

<svg>
  <script>
    <![CDATA[
      window.addEventListener("load", () => {
        //...
      }, false)
    ]]>
  </script>
  <rect x="0" y="0" width="10" height="10" fill="blue" />
</svg>

Или, если вы поместите свой JS в конец другого кода SVG, вы можете не добавлять прослушиватели событий и гарантировать, что JavaScript будет выполняться, когда SVG появится на странице.

<svg>
  <rect x="0" y="0" width="10" height="10" fill="blue" />
  <script>
    <![CDATA[
      //...
    ]]>
  </script>
</svg>

Подобно элементам HTML, элементы SVG также могут иметьidа такжеclassсвойство, так что мы можем использоватьSelectors APIпроцитировать их:

<svg>
  <rect x="0" y="0" width="10" height="10" fill="blue"
        id="my-rect" class="a-rect" />
  <script>
    <![CDATA[
      console.log(document.getElementsByTagName('rect'))
      console.log(document.getElementById('my-rect'))
      console.log(document.querySelector('.a-rect'))
      console.log(document.querySelectorAll('.a-rect'))
    ]]>
  </script>
</svg>

Пожалуйста, посмотрите эту разбивкуflaviocopes-svg-script.glitch.me/для функциональных советов.

JavaScript вне SVG

Если вы можете взаимодействовать с SVG (SVG встроен в HTML), вы можете использовать JavaScript для изменения любого свойства SVG, например:

document.getElementById("my-svg-rect").setAttribute("fill", "black")

или действительно делай что хочешьDOMработать.

CSS вне SVG

Вы можете использовать CSS для изменения любого стиля изображения SVG.

Свойства SVG можно легко переопределить в CSS, и они имеют более низкий приоритет, чем CSS. Они не ведут себя как встроенный CSS с более высоким приоритетом.

<style>
  #my-rect {
    fill: red
  }
</style>
<svg>
  <rect x="0" y="0" width="10" height="10" fill="blue"
        id="my-rect" />
</svg>

SVG vs Canvas API

Canvas API — отличное дополнение к веб-платформе с поддержкой браузера, аналогичной SVG. Основное (и самое большое) отличие от SVG заключается в том, что холст основан не на векторах, а на пикселях, поэтому

  • Он имеет те же проблемы с масштабированием, что и пиксельные форматы изображений png, jpg и gif.
  • Это делает невозможным редактирование изображений холста с помощью CSS или JavaScript, таких как SVG.

SVG-символы

Символы позволяют вам определить изображение SVG один раз и повторно использовать его в нескольких местах. Это очень поможет, если вам нужно повторно использовать изображение, возможно, просто немного изменить некоторые его свойства.

Вы можете сделать это, добавивsymbolэлемент и назначитьidсвойство сделать это:

<svg class="hidden">
  <symbol id="rectangle" viewBox="0 0 20 20">
    <rect x="0" y="0" width="300" height="300" fill="rgb(255,159,0)" />
  </symbol>
</svg>

<svg>
  <use xlink:href="#rectangle" href="#rectangle" />
</svg>

<svg>
  <use xlink:href="#rectangle" href="#rectangle" />
</svg>

(xlink:hrefдля поддержки Safari, хотя это устаревшее свойство)

Это позволяет нам начать понимать мощь SVG.

Что, если вы хотите использовать разные стили для двух прямоугольников, например, разные цвета для каждого прямоугольника? ты можешь использовать этоCSS-переменные.

<svg class="hidden">
  <symbol id="rectangle" viewBox="0 0 20 20">
    <rect x="0" y="0" width="300" height="300" fill="var(--color)" />
  </symbol>
</svg>

<svg class="blue">
  <use xlink:href="#rectangle" href="#rectangle" />
</svg>

<svg class="red">
  <use xlink:href="#rectangle" href="#rectangle" />
</svg>

<style>
svg.red {
  --color: red;
}
svg.blue {
  --color: blue;
}
</style>

Просмотр символов SVG --Моя игровая площадка для глюков.

Проверить SVG

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

SVG можно использоватьW3C Validatorпроверять.

я должен включитьxmlnsимущество?

Иногда SVG не определяется как

<svg>
  ...
</svg>

иногда определяется как

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

Вторая форма — XHTML. Его можно использовать с HTML5 (в документации есть<!DOCTYPE html>), но в данном варианте первая форма проще.

Должен ли я беспокоиться о проблемах с поддержкой браузера?

В версии 2018 года подавляющее большинство браузеров пользователей поддерживают SVG. .

Вы все еще можете использовать что-то вродеModernizrБиблиотека, подобная этой, для проверки отсутствия поддержки и предоставления запасного варианта:

if (!Modernizr.svg) {
  $(".my-svg").attr("src", "images/logo.png");
}

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из ИнтернетаНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории