Что такое SVG-файл? – Плюсы, минусы, XML-код

SVG – векторная графика в текстовом формате

Масштабируемая векторная графика (SVG) – это язык XML для создания двумерной векторной и смешанной векторно-растровой графики. Документ SVG представляет собой текстовый файл, описывающий изображения в виде геометрических примитивов: линий, кривых, фигур, текста и т. д. Векторные объекты создаются и сохраняются в виде набора команд, чисел, формул, а не в виде пиксельной сетки, как в растровых изображениях. Это означает, что размер векторных SVG можно значительно изменить без потери качества, что делает их идеальными для значков, логотипов, спрайтов SVG и многого другого. Поскольку файлы SVG написаны в коде XML, они хранят информацию в виде обычного текста, а не фигур. Это позволяет поисковым системам, таким как Google, читать графику SVG для своих ключевых слов, что может помочь веб-сайту подняться в рейтинге поиска.

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

SVG файл – XML код

Файл SVG написан на языке разметки XML. Код XML в документе SVG определяет все формы, пути, цвета и текст, составляющие изображение. Код SVG можно встроить непосредственно в HTML или сохранить в файл SVG и вставить, как любое другое изображение. Поскольку все содержимое файла SVG представляет собой текст, вы можете открыть его в текстовом редакторе, прочитать и отредактировать код SVG. Вы можете использовать современный веб-браузер, например Chrome, Firefox или Edge, чтобы открывать и просматривать онлайн-изображения SVG, не загружая их. Вы можете легко идентифицировать файл SVG по его расширению .svg.

Элементы и атрибуты

Каждый документ SVG базируется на основных структурных элементах XML: древовидной структуре, тегах, элементах и ​​атрибутах. Элементы применяются для рисования, преобразования, стилизации и размещения изображений. Они могут содержать атрибуты, определяющие его свойства, то есть сведения о том, как элемент следует обрабатывать или отображать. Элемент записывается с помощью начального и конечного тегов в угловых скобках. Файл SVG должен быть написан в соответствии с синтаксисом XML и спецификацией W3C SVG 2.0.

Давайте посмотрим на простой пример. Мы генерируем SVG-изображение четырех кругов разного размера и цвета с одним центром:

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="#B0C4DE" />
    <circle cx="50" cy="50" r="30" fill="#DDA0DD" />
    <circle cx="50" cy="50" r="20" fill="#FFB6C1" />
    <circle cx="50" cy="50" r="10" fill="#5F9EA0" />
</svg>

Основным элементом кода SVG является элемент <svg>, который определяет фрагмент документа SVG.

• Атрибут xmlns в SVG означает пространство имен XML, представляющее стандартные элементы и атрибуты, которые могут использоваться в документе SVG в соответствии со спецификацией масштабируемой векторной графики. Без атрибута xmlns код SVG может отображаться неправильно или вообще не отображаться.
• Атрибут viewBox определяет окно, через которое видны элементы вашего SVG. В этом случае поле просмотра простирается от (0,0) до (300,300).

Элемент SVG <circle> используется для рисования круга на экране. Вам необходимо установить положение центра и радиуса круга SVG. В примере мы раскрасили круги разными цветами, используя атрибут fill.

Вот полученное изображение ( circles.svg):

Глава Основы рисования SVG представляет собой учебное пособие, в котором рассматривается, как рисовать изображения SVG, и включает статьи о системах и единицах координат SVG, основных фигурах SVG, данных пути SVG, тексте SVG, основных трансформациях SVG, цвете SVG, заливке & обводке SVG, встроенном контенте SVG, а также фильтрах и градиентах SVG. Наше руководство по рисованию SVG объясняет общие правила и стандартные шаги для создания SVG с нуля на основе простых примеров. Мы надеемся, что это поможет вам в вашей работе или учебе.

Плюсы и минусы формата SVG

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

Плюсы

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

2. Малый размер файла. По сравнению с растровыми изображениями файлы SVG имеют значительно меньший размер; это позволяет быстрее загружать веб-страницу с SVG.

3. Программируемость. Изображения SVG можно создавать, конструировать и редактировать с помощью любого удобного текстового редактора.

4. Сжатие файлов. Файлы SVG представляют собой текстовый XML, поэтому они хорошо сжимаются без потери данных. SVGZ – это сжатый файл SVG. Обычно его размер на 50–80 процентов меньше, чем SVG.

5. Доступность. Будучи текстовым файлом на веб-странице, изображение SVG становится доступным для программ чтения с экрана и поисковых систем, которые могут прочитать его код. Это очень полезно для людей, которым нужна помощь в чтении веб-страниц. Кроме того, изображения SVG можно искать и индексировать поисковыми системами.

6. Производительность. SVG можно встроить в HTML-документ; это приводит к повышению производительности загрузки веб-сайта.

7. Анимация и взаимодействие. SVG доступен из JavaScript и позволяет разработчикам создавать анимацию и интерактивные изображения.

8. Стилизация. Для любого элемента изображения SVG можно установить свойства CSS.

9. Гибкость. Изображения SVG могут взаимодействовать с DOM, CSS, HTML и JavaScript.

10. SVG – это свободный открытый стандарт. SVG 2.0 – это рекомендация W3C и самая последняя версия полной спецификации.

11. Фон SVG по умолчанию прозрачный, что очень важно и удобно для действий веб-дизайнера.

Минусы

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

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

3. Старые браузеры и недостаточная кроссбраузерность. SVG официально поддерживается всеми основными веб-браузерами, за исключением Internet Explorer 8 и более ранних версий. Но некоторые серверы не могут отображать все типы SVG-элементов, поэтому сгенерированные растровые изображения иногда не такие, как хотелось бы автору.

4. Не 3D-графика. В SVG полностью отсутствует поддержка описания 3D-объектов.

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

Несмотря на эти недостатки, разработчики современных браузеров, а также команда Aspose.SVG утверждают, что SVG – это будущее графики веб-дизайна.

История SVG

SVG был разработан Консорциумом Всемирной паутины (W3C) и имеет богатую историю, берущую начало в конце 1990-х годов. На заре Интернета быстро развивались различные форматы и расширения HTML. Очевидно, что формат векторной графики для Интернета был бы полезен. Рабочая группа SVG была создана в 1998 году, чтобы обеспечить стандартный способ представления векторной графики и предложить альтернативу форматам растровых изображений, таким как JPEG и GIF. К 1998 году у W3C существовало шесть конкурирующих приложений в области веб-векторной графики: Web Schematics, PGML, VML, Hyper Graphics Markup Language, WebCGM и DrawML, которые помогли определить, что в конечном итоге стало форматом SVG W3C. В результате рабочая группа SVG изучила общие требования к новому векторному формату и решила не разрабатывать какое-либо из существующих приложений, а разработать новый язык, принимая во внимание уроки, извлеченные из всей предыдущей работы. Среди разработчиков было общее согласие относительно типа необходимых инструментов векторной графики – кривые Безье, маски, композитинг – и рабочая группа SVG сосредоточилась на этой общности, а не на синтаксических конфликтах. По сути, SVG был разработан с нуля, с учетом всех предыдущих влияний.

Первая версия SVG, известная как SVG 1.0, была опубликована как рекомендация W3C 4 сентября 2001 года. Эта версия заложила основу векторной графики в Интернете и представила основные формы, текст, пути и преобразования. Разработка SVG 2.0 началась с цели уточнения и расширения спецификации SVG. SVG 2.0 призван предоставить новые функции и улучшить интеграцию с другими веб-стандартами. Последняя версия проект SVG 2.0 была выпущена 8 марта 2023 г.

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

Для чего используются файлы SVG?

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

Некоторые практические примеры использования:

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

Цель команды Aspose.SVG – помочь вам узнать достаточно о технологии SVG, которая позволит вам создавать то, что вам нужно.

Aspose.SVG предлагает бесплатные веб-приложения SVG для преобразования файлов SVG или изображений, объединения файлов SVG, векторизации изображений, генерации спрайтов SVG, кодирования данных SVG в Base64 и векторизации текста. Эти онлайн-приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Это быстрый и простой способ качественно и результативно решить Ваши задачи!