Статьи

Использование CSS в реальном мире с SVG

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 круг

Преимущества векторов перед растровыми изображениями:

  • SVG выше использует менее 150 байтов, что значительно меньше, чем эквивалентный PNG или JPG
  • Фоны SVG по умолчанию прозрачны
  • изображение может масштабироваться до любого размера без потери качества
  • SVG-код / ​​элементы могут быть легко сгенерированы и обработаны на сервере или в браузере
  • с точки зрения доступности и SEO, текстовые и графические элементы читаются человеком и машиной.

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

SVG Инструменты

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

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

Полученный код обычно можно упростить и свести к минимуму, используя 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; } 

У метода есть пара недостатков:

  1. Это терпит неудачу в IE9 +.
  2. Стили 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 становится статическим изображением исходного состояния (по сути, первого кадра анимации):

Invaders

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

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

Сложные SVG

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

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

  • основные моменты формы и проверки
  • превращение меню гамбургера в значок закрытия X
  • создавая морфинг, похожий на ламповый свет.

Несмотря на век технологии SVG, веб-разработчики все еще находят способы трансформировать скучные блочные страницы с тонкими эффектами, используя CSS с SVG. Пожалуйста, дайте нам знать, если вы создадите какие-либо интересные примеры.