Формат SVG
SVG (Scalable Vector Graphics — масштабируемая векторная графика) — графический формат файлов, применяемый в веб-дизайне для векторных изображений.
Содержание
Описание формата SVG
Вся представленная ниже информация относится к стандарту SVG 1.1, актуальному на момент написания материала.
SVG является стандартизированным расширением языка разметки XML , предназначенным для описания векторной графики преимущественно на веб-ресурсах.
SVG-файлы содержат XML-разметку, описывающую векторные изображения, а именно все его детали в виде геометрических примитивов (линий, кругов, прямоугольников и т. д.) с указанием их размеров, координат и другой необходимой информации.
Пример
Рассмотрим следующий пример векторного изображения в формате SVG :
На изображении описаны всего 5 геометрических фигур: 2 круга разных диаметров по центру и 3 прямоугольника. «Вес» изображения составляет всего 349 байт. Код файла выглядит следующим обрахом:
SVG-теги
Для описания элементов векторной графики в SVG применяются обусловленные спецификацией XML-теги:
| Тег | Значение |
|---|---|
| svg | Родительский контейнер для изображения. |
| g | Родительский контейнер для отдельных элементов изображения. |
| path | Описывает границы объекта. Атрибут d данного тега содержит информацию о точках, формирующих объект, и их координатах. Фактически, любые объекты в SVG можно описывать с помощью тега path . |
| rect | Служит для описания прямоугольных геометрических фигур. |
| circle | Служит для описания круглых геометрических фигур. |
| ellipse | Описывает геометрические фигуры эллиптической формы. |
| line | Описывает прямые линии. |
| polyline | Описывает границы незамкнутых фигур. |
| polygon | Описывает границы замкнутых фигуры, автоматически замыкая начальную и конечную точки. |
| text | Применяется для отображения текста. |
| tsspan | Применяется для отдельных участков текста внутри тега text . |
| image | Применяется для вставки растровых изображений. |
| use | Применяется для копирования отдельных объектов. |
| symbol | Описывает геометрические объекты для последующего их применения посредством тега use . |
Атрибуты тегов
Для описания свойств объектов векторного изображения в SVG-тегах применяется множество атрибутов. Вот некоторые из них:
Width Определяет ширину объекта. Height Определяет высоту объекта. Fill Определяет цвет заливки фигуры. Stroke Определяет цвет обводки фигуры.
Как создать SVG-картинку?
Можно выделить следующие способы создания векторных изображений в формате SVG :
- вручную в текстовом редакторе,
- с помощью векторных графических редакторов,
- через онлайн-сервисы.
Создание вручную
При условии знании языка разметки SVG нарисовать простейшую фигуру в текстовом редакторе не составит труда, хотя более сложные изображения так не делаются.
Чтобы нарисовать красный квадрат с черной обводкой достаточно создать простой текстовый файл, заменить его расширение с .txt на .svg и вставить в него следующий код:
Графические редакторы
Чтобы нарисовать изображения в формате SVG , вовсе не обязательно знать язык разметки. Популярные редакторы векторной графики (Illustrator, CorelDRAW, InkScape) позволяют создавать и редактировать SVG-картинки, а также экспортировать в SVG другие форматы ( AI , CDR , EPS ).
Естественно, что перечисленные графические редакторы сами генерируют SVG-разметку при сохранении файла, не предоставляя пользователю возможность редактировать код в своём графическом интерфейсе.
SVG-изображения, созданные в графических редакторах, содержат много лишней мета-информации, которую можно удалить вручную для уменьшения размера файла.
Веб-приложения
Для создания, редактирования и сохранения SVG-рисунков также применяются онлайн-инструменты. Их функционал достаточно в сравнении с десктопными графическими редакторами, но для простейших рисунков они применимы:
Method Draw Простой в освоении и приятный глазу редактор, к тому же позволяющий редактировать SVG-код в интерфейсе. SVG Editor Более сложный в освоении редактор с непривычным интерфейсом и ограничениями в доступе.
Как реализовать SVG-анимацию?
Формат SVG предоставляет веб-дизайнерам огромные возможности в реализации статичных и интерактивных анимированных изображений для сайтов.
SVG-анимация посредством CSS (3,9 КБ)
Анимированные SVG-картинки во всём превосходят растровые GIF-аналоги: размер файла может быть меньше в десятки, сотни и даже тысячи раз, нет ограничений в глубине цвета, можно применять полупрозрачность и обеспечивать интерактивность, а чтобы создать анимацию вовсе не надо быть художником.
Реализовать анимацию в SVG можно 3-мя способами:
С помощью CSS3 Этот вариант предполагает манипулирование геометрическими примитивами с помощью внутренних или внешних CSS-свойств анимации. С помощью JS Геометрическими примитивами в SVG также можно манипулировать посредством JavaScript. С помощью SMIL Этот способ предполагает реализацию анимации с помощью специальных внутренних тегов в SVG-коде.
Наиболее простым и не требующим знаний в JS-программировании и SMIL-анимации можно считать анимацию посредством CSS. Для создания сложных SVG-анимаций, требующих определённых математических расчетов, существуют специальные JS-плагины и отдельные скрипты.
Как вставить SVG на сайт?
Векторные SVG-картинки могут быть внедрены в HTML-код посредством:
- тега img ,
- тега embed ,
- CSS-свойств в качестве фона,
- внедрения SVG-разметки (inline).
| Особенность | inline | object | img | CSS |
|---|---|---|---|---|
| Отсутствие запроса к серверу | + | — | — | — |
| Кэширование в браузере | — | + | + | + |
| Встроенные CSS-свойства | + | + | + | + |
| Внешние CSS-свойства | + | — | — | — |
| JS-манипулирование | + | + | — | — |
| Встроенная анимация | + | + | + | + |
| Интерактивная анимация | + | + | — | — |
Вставка через тег img
Данный способ применим для вставки SVG на сайт в качестве статичного или анимированного изображения без интерактивности.
Недостатки метода
- Внешние CSS-свойства не применяются к SVG-тегам.
- JS не влияет на SVG-теги.
- Интерактивная SMIL-анимация не работает.
Вставка через тег object
Данный способ вставки SVG является наиболее предпочтительным в большинстве случаев.
Недостатки метода
- Внешние CSS-свойства не применяются к SVG-тегам.
Вставка через CSS
Для применения SVG-картинки в качестве фона HTML-элемента применяются CSS-свойства background или background-image :
Недостатки метода
- Внешние CSS-свойства не применяются к SVG-тегам.
- JavaScript не может управлять элементами изображения.
- Интерактивная SMIL-анимация не функционирует.
Непосредственное внедрение SVG в HTML
Таким образом можно вставлять небольшие SVG-картинки. Для больших изображений целесообразно подключать отдельный файл, который будет кэшироваться браузером.
Недостатки метода
- Изображение не кэшируется.
Сколько «весят» SVG-файлы?
Сравнение размеров файлов SVG и PNG
Размер SVG-файлов (вес изображений), в отличие от растровых картинок, не зависит от размера в пикселях, но зависит от объёма кода. Для изображений большого размера преимущества формата SVG очевидны:
Оптимизированный SVG: 893 Б не зависимо от размера
Оптимизированный PNG-8 800×160px: 1.83 КБ
Оптимизированный PNG-8 600×120px: 1.4 КБ
Оптимизированный PNG-8 400×80px: 1.07 КБ
Оптимизированный PNG-8 200×40px: 670 Б
Все представленные PNG-файлы максимально сжаты и используют всего 16 цветов в палитре, при этом код SVG-файла максимально сокращён, но с использованием GZIP на стороне сервера «вес» будет составлять всего 468 Байт. Можно предположить, что SVG во всех случаях выигрывает у растровых изображений в отношении размера файла, но это не всегда так и за
Здесь можно наблюдать огромную разницу в размере файла между PNG и SVG : почти в 9 раз в пользу PNG , при том, что его размер в пикселях не так уж мал (800×335).
Это можно объяснить огромным количеством геометрических примитивов, описывающих картинку в SVG , в то время как PNG использует только цветные пиксели.
Из всего этого можно сделать следующий вывод:
SVG целесообразно использовать для изображений, не требующих большого количества геометрических объектов для отрисовки.
Оптимизация SVG-кода
Объём SVG-кода можно уменьшить путём оптимизации:
Удаление мета-данных После сохранения в графических редакторах (например, Adobe Illustrator) SVG-код содержит много ненужной информации, удаление которой сократит размер файла и ни как не отразится на изображении. Удаление лишних объектов Изображение может содержать ненужные или скрытые объекты, а также теги, группирующие объекты, удаление которых не сказывается на изображении. Удаление неиспользуемых классов и идентификаторов При редактировании векторных изображений графические редакторы могут добавлять к тегам классы и идентификаторы, в которых не нуждается финальный вариант картинки. Оптимизация атрибутов тегов Частое использование атрибутов можно заменить посредством CSS-свойств: при большом количестве элементов это поможет значительно уменьшить вес SVG . Удаление лишних узлов Каждая точка в векторном изображении отражается на объёме кода: удаление лишних узлов поможет сократить его объём.
Все эти действия можно проделать вручную в текстовом редакторе, но для этого необходимо знание языка разметки SVG . Намного более простым и эффективным вариантом является использование оптимизатора SVGO:
-
, — описание и возможности на русском, — веб-приложение.
Веб-приложение SVGOMG позволяет оптимизировать SVG-картинки онлайн, при этом предоставляя всю необходимую информацию в своём интерфейсе: можно контролировать изменение веса файла в процентном соотношении, изменяя те или иные опции, а также видеть, отражается ли применение настроек на самом изображении:
Сжатие SVG-данных
Как и все текстовые данные, SVG-код может быть сжат алгоритмом GZIP. При активации на сервере алгоритм обеспечивает передачу данных от сервера браузеру в сжатом виде.
Для GZIP-сжатия на сервере должен функционировать модуль mod_deflate . Чтобы указать серверу, что SVG-файлы необходимо сжимать, в файле .htaccess указывается следующий код:
Кроме того, для уменьшения общего размера файла можно использовать формат SVGZ , содержащий сжатые данные SVG . Но смысла в этом нет, если применяется серверное GZIP-сжатие данных. Картинки в формате SVGZ можно сохранять в Adobe Illustrator.
Конвертация SVG в другие форматы и обратно
Конвертация растрового изображения в SVG-формат сопровождается трассировкой (векторизацией) и редко используется, а конвертация из SVG в растровый формат применяется намного чаще.
Как конвертировать в SVG?
Невозможно точно конвертировать растровый формат (например, JPG ) в SVG (или другой векторный формат), т. к. это разные виды графики. Но можно произвести трассировку растровой картинки и сохранить её в формате SVG .
Трассировка — процесс векторизации растрового изображения путём образования векторных контуров.
Необходимо понимать, что трассировка не может абсолютно точно преобразовать растровое изображение в векторный формат:
Результат трассировки зависит от многих особенностей исходного растрового изображения:
- контрастности,
- цветовой палитры,
- степени детализации,
- и др.
Трассировка — автоматический процесс создания векторных контуров. Иначе говоря, SVG-код результата трассировки будет содержать неопределённое количество тегов path , и файл на выходе может «весить» несравнимо больше исходного растрового изображения.
Выполнить трассировку растровой картинки ( JPG , PNG , GIF ) и сохранить её в SVG можно посредством Adobe Illustrator.
Как конвертировать из SVG?
Конвертировать SVG в растровый формат ( JPG , PNG , GIF ) можно с помощью векторных графических редакторов (Adobe Illustrator, CorelDRAW) посредством функций экспорта.
Процесс растеризации векторных изображений можно наблюдать в Photoshop или другом редакторе растровых изображений: при открытии векторного файла будет предложено его растрировать в определённом размере, после чего картинку можно сохранить в любом доступном растровом формате.
Преимущества формата SVG
Формат SVG имеет все преимущества векторной графики, а также ряд других преимуществ относительно растровых форматов изображений, применяемых в веб-дизайне:
-
Качество детализации не зависит от размера изображения
SVG-картинки не теряют в качестве детализации при увеличении или уменьшении их размера в пикселях.
Огромное преимущество перед растровыми форматами: SVG-картинки можно увеличивать или уменьшать во сколько угодно раз, при этом размер файла остаётся неизменным.
Возможности анимации SVG-изображений во много раз превосходят возможности GIF-анимации.
Для любого элемента SVG-картинки могут быть заданы CSS-свойства.
SVG использует все возможности браузеров.
В SVG-код можно подключать ссылки на растровые изображения, или внедрять их в виде base64.
Текст в SVG-изображении может быть преобразован в контуры, но можно использовать его посредством шрифта.
GZIP-сжатие и оптимизация кода может существенно уменьшить вес SVG-картинок без потерь в качестве отрисовки.
Недостатки формата SVG
- Не подходит для реалистичных изображений
Векторная графика не позволяет реализовать реалистичные цветовые переходы.
Сложность картинки пропорциональна количеству геометрических примитивов, а значит и «весу» SVG-изображения.
Рекомендации по применению формата
На основании вышеизложенного материала можно сделать выводы относительно применения векторных SVG-изображений на веб-сайтах:
- применяйте SVG для несложных рисунков и иконок с небольшим количеством деталей,
- применяйте SVG , если требуется статичная или интерактивная анимация рисунков,
- при выборе между SVG и растровым форматом сравнивайте размеры файлов на выходе,
- применяйте CSS и JS для реализации интерактивности SVG-картинок,
- при необходимости применяйте в SVG текст, не преобразуя его в контуры,
- оптимизируйте SVG-код файла на выходе,
- активируйте GZIP-сжатие SVG ,
- не используйте «тяжелые» SVG-файлы.
Часто задаваемые вопросы
Как создать (сохранить) SVG-файл?
Чем открыть файл в формате SVG?
Открыть SVG-файл можно в современных интернет-обозревателей (браузеров) для просмотра, а также в популярных редакторах векторной (CorelDRAW, Illustrator) и растровой (Photoshop) графики для редактирования и конвертации.
Как сохранить (скачать) SVG-изображение с сайта?
Сохранить SVG-файл с сайта можно различными способами в зависимости от того, как он вставлен в HTML.
Чтобы сохранить SVG-картинку, вставленную посредством тега img , нужно кликнуть по ней правой кнопкой мыши в браузере и из появившегося контекстного меню выберите «Сохранить изображение как. » (название пункта может отличаться в зависимости от браузера). Таким же способом можно копировать с сайтов картинки в других форматах.
В иных случаях нужно искать URL SVG-файла в HTML- или CSS-коде, открывать его в новом окне браузера и сохранять, применяя функцию «Сохранить как. ».
Как вставить SVG на сайт?
Как сохранить SVG в Photoshop?
Photoshop не предоставляет возможность сохранения изображений в этом формате. SVG — формат векторной графики. Для сохранения в этом формате применяются соответствующие программы (Illustrator, CorelDRAW).
Как сохранить SVG в Illustrator?
Чтобы сохранить картинку в формате SVG в Illustrator:
- откройте или создайте изображение в программе,
- выберите Файл → Сохранить как. (клавиши Shift + Ctrl + S ),
- в диалоговом окне выберите папку для сохранения, название и тип файла ( SVG ) и нажмите «Сохранить»,
- откроется модальное окно программы Illustrator с параметрами сохранения файла в формате SVG :
Как сжать (уменьшить) размер SVG-файла?
Как конвертировать JPG в SVG?
Как конвертировать SVG в JPEG?
Почему SVG не отображается на сайте?
Как правило, SVG не отображается на сайте из-за ошибок в коде файла или неправильной вставки в HTML-код Вставка SVG на сайт.
How to Export an SVG for web using Adobe Illustrator
SVGs are the future. Get vectorized! Small size. Process of exporting SVG hYAh.
Step 1. Open the source vector file in Adobe Illustrator
.ai, .eps, and .pdf are all valid file formats for vector source files.
Step 2. File > Document Setup
- Click on Edit Artboards
- Specify the W and H dimensions of the artboard to fit the design
- Scale the vector artwork to fit the newly sized artboard
Step 3. Select all and Object > Path > Outline Stroke
Step 4. File > Export…
Make sure use “Use Artboards” is checked.
Step 5.Click “Export”
- Select Format: SVG (svg)
Use the following settings:
- Styling: Internal CSS
- Font: Convert To Outline
- Images: Preserve
- Decimal: 4
- Minify: Checked
- Responsive: Unchecked
*BONUS STEP* (for improved legacy browser compatibility)
Open the generated .svg file and add the following XML attribute to the SVG tag:
preserveAspectRatio=»xMidYMid meet»
Resources
- http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
- Description of values:
meet – Preserves aspect ratio and scales view box to fit within viewport.
slice – Preserves aspect ratio and slices off any part of the image that does not fit inside the viewport.
none – Does not preserve aspect ratio. Scales image to fit view box fully into viewport. Proportions will be distorted.
Recent Posts
- How to take a screenshot in Chrome, Firefox, Safari, and Edge
- How to clear your browser cache
- Upgrade WordPress Search with Elasticsearch
- A Philosophical Appeal to Globally Embrace GDPR
- How to Export an SVG for web using Adobe Illustrator
WEBDOGS
WordPress Design & Development in
San Jose, Silicon Valley, and Beyond
Accessibility Privacy Policy Copyright © 2012 — 2022 WEBDOGS LLC. All rights reserved.
Сохранение типа шрифта в SVG-файле иллюстратора
Привет, я новичок в иллюстраторе и создал изображение, которое использует шрифт «Skia-Regular». Но когда я сохраняю это изображение в формате .svg , он меняет тип шрифта. И когда я открываю файл формата .svg в браузере, шрифт совершенно другой. Может кто-нибудь, пожалуйста, скажите мне, что я делаю не так. Я также открыл файл .svg в notepad ++ и там написано: font-family = «Skia-Regular», но все же шрифт не Skia Regular. Любая помощь будет оценена. Спасибо
Изображение также прикреплено для справки 
Если вы хотите быть уверены, что текст будет выглядеть одинаково во всех случаях —
Во-первых, вы можете развернуть текст перед сохранением как SVG
Во-вторых, в диалоговом окне сохранения шрифта вы можете нажать «преобразовать в контур»
Причина, по которой шрифт не отображается правильно для фактического типа шрифта, заключается в том, что при сохранении SVG с помощью приложения Illustrator. Приложение автоматически преобразует дизайн в код. И если внимательно следить, имя шрифта в коде не совпадает с фактическим шрифтом, установленным в системе.
Чтобы преодолеть проблему рендеринга шрифтов, вам необходимо скопировать код SVG из Illustrator и изменить имя шрифта, чтобы оно соответствовало имени шрифта, установленного в вашей системе. (Например: имя шрифта в коде SVG, которое от Illustrator «Arial-Regular», но имя шрифта, установленного в вашей системе, «Arial Regular». Здесь вам нужно будет изменить код, чтобы Font-Family назывался «Arial Regular». ».)
Это решит вашу проблему без необходимости преобразования шрифтов в контур.
Надеюсь это поможет!
Как вы заметили, гарнитура — это ссылка на файл шрифта, который может (или не может) быть доступен системе, которая пытается открыть svg. Решение состоит в том, чтобы преобразовать ваш тип в пути, чтобы кривые явно сохранялись в файле.
Относительно того, почему браузер может не знать о шрифте, на который вы пытаетесь сослаться, это неясно, так как я предполагаю, что вы тестируете на том же компьютере, который вы использовали при создании файла svg. Вполне вероятно, что шрифт можно выбрать в Illustrator, но формально не установить на уровне операционной системы.
архив для сети:
- использовать гугл шрифты.
- использование только двух семейств шрифтов макс.
Экспорт: шрифты: (текст: svg, subconjunto: нет). свойства svg: (элемент стиля).
в пределах стилей полученного файла отредактируйте его:
- прикрепить строку «@import».
- прикрепить «px» ко всему размеру шрифта.
- переименуйте имя шрифта.
результат:
Скорее всего, на вашем компьютере нет шрифта семейства шрифтов (Skia-Regular), доступного локально. Поэтому, когда вы открываете файл SVG в своем браузере, он отрисовывается с использованием системного шрифта по умолчанию, который в большинстве случаев является Times New Roman. Есть несколько обходных путей: