SVG — это легкий формат векторных изображений, который используется для отображения разнообразной графики в Интернете и других средах с поддержкой интерактивности и анимации. В этой статье мы рассмотрим различные способы использования CSS с SVG и способы включения SVG на веб-страницу и манипулирования ими.
Формат масштабируемой векторной графики (SVG) является открытым стандартом с 1999 года, но использование браузера стало практичным в 2011 году после выхода Internet Explorer 9. Сегодня SVG хорошо поддерживается во всех браузерах , хотя более сложные функции могут различаться.
Преимущества SVG
Растровые изображения, такие как PNG, JPG и GIF, определяют цвет отдельных пикселей. PNG-изображение 100 × 100 требует 10000 пикселей. Каждый пиксель требует четыре байта для красного, зеленого, синего и прозрачности, поэтому размер получаемого файла составляет 40000 байт (плюс немного больше для метаданных). Сжатие применяется для уменьшения размера файла; PNG и GIF используют ZIP-сжатие без потерь, в то время как JPG с потерями и удаляет менее заметные детали.
Растровые изображения идеальны для фотографий и более сложных изображений, но определение теряется по мере увеличения изображений.
SVG — это векторные изображения, определенные в XML. Точки, линии, кривые, пути, эллипсы, прямоугольники, текст и т. Д. Нарисованы на холсте SVG. Например:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="250" stroke-width="20" stroke="#f00" fill="#ff0" /> </svg> viewBox определяет пространство координат. В этом примере область 800 × 600, начинающаяся с позиции 0,0, имеет желтый круг с красной границей, нарисованной в центре:
Преимущества векторов перед растровыми изображениями:
- SVG выше использует менее 150 байтов, что значительно меньше, чем эквивалентный PNG или JPG
- Фоны SVG по умолчанию прозрачны
- изображение может масштабироваться до любого размера без потери качества
- SVG-код / элементы могут быть легко сгенерированы и обработаны на сервере или в браузере
- с точки зрения доступности и SEO, текстовые и графические элементы читаются человеком и машиной.
SVG идеально подходит для логотипов, диаграмм, значков и более простых диаграмм. Только фотографии, как правило, непрактичны, хотя SVG использовались для ленивых заполнителей .
SVG Инструменты
Полезно понимать основы рисования SVG , но вскоре вы захотите создать более сложные фигуры с редактором, который может генерировать код. Варианты включают в себя:
- Adobe Illustrator (коммерческий)
- Affinity Designer (рекламный ролик)
- Эскиз (рекламный ролик)
- Inkscape (с открытым исходным кодом)
- Gravit Designer (бесплатно, онлайн)
- Vectr (бесплатно, онлайн)
- SVG-Edit (с открытым исходным кодом , онлайн)
- Boxy SVG (бесплатно, приложение, онлайн, но только в браузерах Blink)
- Vecteezy — (бесплатно, онлайн, но только в браузерах Blink)
- Библиотеки диаграмм SVG — которые обычно создают диаграммы SVG с использованием данных, передаваемых в функции JavaScript.
Каждый из них имеет свои сильные стороны, и вы получите разные результаты для, казалось бы, идентичных изображений. Как правило, более сложные изображения требуют более сложного программного обеспечения.
Полученный код обычно можно упростить и свести к минимуму, используя SVGO ( плагины доступны для большинства инструментов сборки ) или интерактивный инструмент Jake Archibold SVGOMG .
SVG как статические изображения
При использовании внутри <img> HTML <img> или CSS background-url , SVG действуют так же, как и растровые изображения:
<!-- HTML image --> <img src="myimage.svg" alt="a vector graphic" />
/* CSS background */ .myelement { background-image: url('mybackground.svg'); }
Браузер отключит любые скрипты, ссылки и другие интерактивные функции, встроенные в файл SVG. Вы можете манипулировать SVG с помощью CSS таким же образом, как и другие изображения, используя transform , filters и т. Д. Результаты использования CSS с SVG часто превосходят растровые изображения, поскольку SVG можно бесконечно масштабировать.
CSS встроенные фоны SVG
SVG может быть встроен непосредственно в код CSS как фоновое изображение. Это может быть идеально для небольших, многократно используемых значков и позволяет избежать дополнительных HTTP-запросов. Например:
.mysvgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat; }
Можно использовать стандартную кодировку UTF-8 (а не base64), поэтому при необходимости легко редактировать изображение SVG.
CSS с SVG: адаптивные изображения SVG
При создании адаптивного веб-сайта обычно практично не <img> атрибуты width и height <img> и разрешать размер изображения до максимальной ширины с помощью CSS:
img { display: block; max-width: 100%; }
Однако SVG, используемый в качестве изображения, не имеет неявных размеров. Вы можете обнаружить, что max-width рассчитывается как ноль, и изображение полностью исчезает. Чтобы устранить проблему, убедитесь, что width и height по умолчанию определены в <svg> :
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300">
Примечание: размеры не должны быть добавлены к встроенным SVG, как мы узнаем в следующем разделе …
HTML-изображения в формате SVG
SVG могут быть размещены непосредственно в HTML. Когда это сделано, они становятся частью DOM и могут управляться с помощью CSS и JavaScript:
<p>SVG is inlined directly into the HTML:</p> <svg id="invader" xmlns="http://www.w3.org/2000/svg" viewBox="35.4 35.4 195.8 141.8"> <path d="M70.9 35.4v17.8h17.7V35.4H70.9zm17.7 17.8v17.7H70.9v17.7H53.2V53.2H35.4V124h17.8v17.7h17.7v17.7h17.7v-17.7h88.6v17.7h17.7v-17.7h17.7V124h17.7V53.2h-17.7v35.4h-17.7V70.9h-17.7V53.2h-17.8v17.7H106.3V53.2H88.6zm88.6 0h17.7V35.4h-17.7v17.8zm17.7 106.2v17.8h17.7v-17.8h-17.7zm-124 0H53.2v17.8h17.7v-17.8zm17.7-70.8h17.7v17.7H88.6V88.6zm70.8 0h17.8v17.7h-17.8V88.6z"/> <path d="M319 35.4v17.8h17.6V35.4H319zm17.6 17.8v17.7H319v17.7h-17.7v17.7h-17.7V159.4h17.7V124h17.7v35.4h17.7v-17.7H425.2v17.7h17.7V124h17.7v35.4h17.7V106.3h-17.7V88.6H443V70.9h-17.7V53.2h-17.7v17.7h-53.2V53.2h-17.7zm88.6 0h17.7V35.4h-17.7v17.8zm0 106.2h-35.5v17.8h35.5v-17.8zm-88.6 0v17.8h35.5v-17.8h-35.5zm0-70.8h17.7v17.7h-17.7V88.6zm70.9 0h17.7v17.7h-17.7V88.6z"/> </svg> <p>The SVG is now part of the DOM.</p>
Для SVG не определены атрибуты width или height , поэтому он может соответствовать размеру содержащего элемента или иметь прямой размер с помощью CSS:
#invader { display: block; width: 200px; } #invader path { stroke-width: 0; fill: #080; }
Элементы SVG, такие как контуры, круги, прямоугольники и т. Д., Могут быть предназначены для селекторов CSS, и их стили могут быть изменены с использованием стандартных атрибутов SVG в качестве свойств CSS. Например:
/* CSS styling for all SVG circles */ circle { stroke-width: 20; stroke: #f00; fill: #ff0; }
Это переопределяет любые атрибуты, определенные в SVG, потому что CSS имеет более высокую специфичность. Стилизация SVG CSS предлагает несколько преимуществ:
- стиль атрибута может быть удален из SVG полностью, чтобы уменьшить вес страницы
- Стили CSS можно повторно использовать в любом количестве SVG на любом количестве страниц.
- для всего SVG или отдельных элементов изображения могут применяться эффекты CSS с использованием
:hover,transition,animationи т. д.
SVG Sprites
Один файл SVG может содержать любое количество отдельных изображений. Например, этот файл folders.svg содержит значки папок, созданные IcoMoon . Каждый содержится в отдельном контейнере <symbol> с идентификатором, на который можно ориентироваться:
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <symbol id="icon-folder" viewBox="0 0 32 32"> <title>folder</title> <path d="M14 4l4 4h14v22h-32v-26z"></path> </symbol> <symbol id="icon-folder-open" viewBox="0 0 32 32"> <title>open</title> <path d="M26 30l6-16h-26l-6 16zM4 12l-4 18v-26h9l4 4h13v4z"></path> </symbol> <symbol id="icon-folder-plus" viewBox="0 0 32 32"> <title>plus</title> <path d="M18 8l-4-4h-14v26h32v-22h-14zM22 22h-4v4h-4v-4h-4v-4h4v-4h4v4h4v4z"></path> </symbol> <symbol id="icon-folder-minus" viewBox="0 0 32 32"> <title>minus</title> <path d="M18 8l-4-4h-14v26h32v-22h-14zM22 22h-12v-4h12v4z"></path> </symbol> <symbol id="icon-folder-download" viewBox="0 0 32 32"> <title>download</title> <path d="M18 8l-4-4h-14v26h32v-22h-14zM16 27l-7-7h5v-8h4v8h5l-7 7z"></path> </symbol> <symbol id="icon-folder-upload" viewBox="0 0 32 32"> <title>upload</title> <path d="M18 8l-4-4h-14v26h32v-22h-14zM16 15l7 7h-5v8h-4v-8h-5l7-7z"></path> </symbol> </defs> </svg>
На файл SVG можно ссылаться как на внешний кэшированный ресурс на странице HTML. Например, чтобы показать значок папки в #icon-folder :
<svg class="folder" viewBox="0 0 100 100"> <use xlink:href="folders.svg#icon-folder"></use> </svg>
и стилизуем его с помощью CSS:
svg.folder { fill: #f7d674; }
У метода есть пара недостатков:
- Это терпит неудачу в IE9 +.
- Стили CSS применяются только к элементу
<svg>содержащему<use>.fillздесь делает каждый элемент иконки одинаковым цветом.
Чтобы решить эти проблемы, спрайт SVG может быть встроен в страницу HTML, а затем скрыт с использованием display: none или аналогичных методов. Отдельный значок можно разместить, ссылаясь на идентификатор:
<svg><use xlink:href="#icon-folder"></use></svg>
Это работает во всех современных браузерах IE9 + и становится возможным стилизовать отдельные элементы в каждом значке с помощью CSS.
К сожалению, набор SVG больше не кэшируется и должен воспроизводиться на каждой странице, где требуется иконка. Решение (для этого решения!) Состоит в том, чтобы загрузить SVG с помощью Ajax — который затем кэшируется — и вставить его в страницу. Загрузка IcoMoon предоставляет библиотеку JavaScript, или вы можете использовать SVG для всех .
SVG-эффекты на HTML-контент
SVG давно поддерживает:
- маски : изменение видимости частей элемента
- отсечение : удаление сегментов элемента, поэтому стандартная обычная рамка становится любой другой формы
- фильтры : графические эффекты, такие как размытие, яркость, тени и т. д.
Эти эффекты были перенесены в CSS- mask , clip-path и свойства filter . Тем не менее, все еще возможно нацелить селектор SVG:
/* CSS */ .myelement { clip-path: url(#clip); }
Это ссылается на эффект внутри SVG, встроенного в HTML:
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"> <defs> <clipPath id="clip"> <text x="0" y="200" font-family="Arial" font-size="10em" font-weight="800">Text Clip</text> </clipPath> </defs> </svg>
для создания таких эффектов, как обрезанный текст с изображением или градиентным фоном:
Портативные SVG
Наконец, автономные SVG могут содержать шрифты CSS, JavaScript и base64, а также растровые изображения! Все, что находится за пределами XML, должно содержаться в разделах <![CDATA[ … ]]> .
Рассмотрим следующий файл invader.svg . Он определяет стили CSS с эффектами наведения и анимацию JavaScript, которая изменяет состояние viewBox :
<svg id="invader" xmlns="http://www.w3.org/2000/svg" viewBox="35.4 35.4 195.8 141.8"> <!-- invader images: https://github.com/rohieb/space-invaders !--> <style>/* <![CDATA[ */ path { stroke-width: 0; fill: #080; } path:hover { fill: #c00; } /* ]]> */</style> <path d="M70.9 35.4v17.8h17.7V35.4H70.9zm17.7 17.8v17.7H70.9v17.7H53.2V53.2H35.4V124h17.8v17.7h17.7v17.7h17.7v-17.7h88.6v17.7h17.7v-17.7h17.7V124h17.7V53.2h-17.7v35.4h-17.7V70.9h-17.7V53.2h-17.8v17.7H106.3V53.2H88.6zm88.6 0h17.7V35.4h-17.7v17.8zm17.7 106.2v17.8h17.7v-17.8h-17.7zm-124 0H53.2v17.8h17.7v-17.8zm17.7-70.8h17.7v17.7H88.6V88.6zm70.8 0h17.8v17.7h-17.8V88.6z"/> <path d="M319 35.4v17.8h17.6V35.4H319zm17.6 17.8v17.7H319v17.7h-17.7v17.7h-17.7V159.4h17.7V124h17.7v35.4h17.7v-17.7H425.2v17.7h17.7V124h17.7v35.4h17.7V106.3h-17.7V88.6H443V70.9h-17.7V53.2h-17.7v17.7h-53.2V53.2h-17.7zm88.6 0h17.7V35.4h-17.7v17.8zm0 106.2h-35.5v17.8h35.5v-17.8zm-88.6 0v17.8h35.5v-17.8h-35.5zm0-70.8h17.7v17.7h-17.7V88.6zm70.9 0h17.7v17.7h-17.7V88.6z"/> <script>/* <![CDATA[ */ const viewX = [35.4, 283.6], animationDelay = 500, invader = document.getElementById('invader'); let frame = 0; setInterval(() => { frame = ++frame % 2; invader.viewBox.baseVal.x = viewX[frame]; }, animationDelay); /* ]]> */</script> </svg>
При ссылке в фоне HTML <img> или CSS SVG становится статическим изображением исходного состояния (по сути, первого кадра анимации):
Тем не менее, откройте изображение в его собственной вкладке браузера, и все эффекты вернутся.
Это может быть полезно для распространения изображений, демонстраций или небольших документов, которые требуют уровня встроенной интерактивности.
Сложные SVG
SVG предлагает широкий спектр технических возможностей как внутри, так и за пределами веб-страниц. Комбинируя CSS с SVG, становится возможным стилизовать и анимировать все изображение или отдельные элементы интересными способами.
В этой статье описываются способы манипулирования изображениями SVG, но они регулярно используются для небольших визуальных улучшений, таких как:
- основные моменты формы и проверки
- превращение меню гамбургера в значок закрытия
X - создавая морфинг, похожий на ламповый свет.
Несмотря на век технологии SVG, веб-разработчики все еще находят способы трансформировать скучные блочные страницы с тонкими эффектами, используя CSS с SVG. Пожалуйста, дайте нам знать, если вы создадите какие-либо интересные примеры.