Работа с svg. вставляем svg на веб страницу

Достоинства формата

Растровое изображение содержит в себе информацию о точках, а векторное — о фигурах (форме). Здесь показано ключевое преимущество «вектора» над «растром» с точки зрения масштабирования в изобразительных целях.

• Текстовый формат — файлы SVG можно читать и редактировать (при наличии некоторых навыков) при помощи обычных текстовых редакторов. При просмотре документов, содержащих SVG-графику, имеется доступ к просмотру кода просматриваемого файла и возможность сохранения всего документа. Кроме того, SVG-файлы обычно получаются меньше по размеру, чем сравнимые по качеству изображения в форматах JPEG или GIF, а также хорошо поддаются сжатию.
• Масштабируемость — SVG является векторным форматом. Существует возможность увеличить любую часть изображения SVG без потери качества. Дополнительно, к элементам SVG-документа возможно применять фильтры — специальные модификаторы для создания эффектов, подобных применяемым при обработке растровых изображений (размытие, выдавливание, сложные системы трансформации и др.) В тексте SVG-кода фильтры описываются тегами, визуализацию которых обеспечивает средство просмотра, что не влияет на размер исходного файла, обеспечивая при этом необходимую иллюстративную выразительность.
• Широко доступно использование растровой графики в SVG-документах. Имеется возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.
• Текст в графике SVG является текстом, а не изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами, не нужно создавать дополнительные метафайлы для поисковых роботов.
• Анимация реализована в SVG с помощью языка SMIL (Synchronized Multimedia Integration Language), разработанного также консорциумом W3C. Поддерживаются скриптовые языки на основе спецификации ECMAScript. SVG-элементами можно управлять с помощью JavaScript. Применение скриптов и анимации в SVG позволяет создавать динамичную и интерактивную графику. В SVG обеспечивается событийная модель, отслеживаются события (загрузка страницы, изменение её параметров, события мыши, клавиатуры и др.) Анимация может запускаться по определённому событию (например «onmouseover» или «onclick»), что придаёт графике интерактивность. У каждого элемента есть свои собственные события, к которым можно привязывать отдельные скрипты.
• SVG — открытый стандарт. В отличие от некоторых других форматов, SVG не является чьей-либо собственностью.
• SVG-документы легко интегрируются с HTML и XHTML документами. Внешние SVG подключаются через тег <object>, значение атрибута data — имя файла с расширением «.svg», содержащего разметку SVG, type — MIME-тип, то есть image/svg+xml. Атрибуты width и height определяют размеры области SVG по горизонтали и по вертикали. Элементы SVG совместимы с HTML и DHTML.
• Совместимость с CSS (англ. Cascading Style Sheets). Отображением (форматированием и декорированием) SVG-элементов можно управлять с помощью таблицы стилей CSS 2.0 и её расширений, либо напрямую с помощью атрибутов SVG-элементов.
• SVG предоставляет все преимущества XML:
  • Возможность работы в различных средах.
  • Интернационализация (поддержка Юникода).
  • Широкая доступность для различных приложений.
  • Лёгкая модификация через стандартные API — например, DOM. SVG поддерживает стандартизированную W3C объектную модель документа DOM, обеспечивая доступ к любому элементу, что даёт широкие возможности по динамическому изменению элементов, их атрибутов и событий.
  • Лёгкое преобразование таблицами стилей XSLT. Как любой основанный на XML формат, SVG даёт возможность использовать для его обработки таблицы трансформации (XSLT). Преобразуя XML-данные в SVG с помощью простого XSL, можно легко получить графическое представление любых данных, например визуализировать химические молекулы, описанных на языке CML.

Базовые формы SVG

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

Линия

Для вывода линии в SVG используется элемент . Он рисует отрезок, для которого нужно определить две точки: начало и конец.

<svg>
<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Начало отрезка определяется атрибутами  и , а конечная точка определяется координатами в атрибутах and .

Также имеется два других атрибута ( и ) которые используются для определения цвета и ширины линии соответственно.

Устранение неполадок при открытии файлов SVG

Общие проблемы с открытием файлов SVG

No Cash GBA (No$GBA) не установлен

Дважды щелкнув по файлу SVG вы можете увидеть системное диалоговое окно, в котором сообщается «Не удается открыть этот тип файла». В этом случае обычно это связано с тем, что на вашем компьютере не установлено No Cash GBA (No$GBA) для %%os%%. Так как ваша операционная система не знает, что делать с этим файлом, вы не сможете открыть его дважды щелкнув на него.

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

Установлена неправильная версия No Cash GBA (No$GBA)

В некоторых случаях у вас может быть более новая (или более старая) версия файла Saved Game File, не поддерживаемая установленной версией приложения. При отсутствии правильной версии ПО No Cash GBA (No$GBA) (или любой из других программ, перечисленных выше), может потребоваться загрузить другую версию ПО или одного из других прикладных программных средств, перечисленных выше. Такая проблема чаще всего возникает при работе в более старой версии прикладного программного средства с файлом, созданным в более новой версии, который старая версия не может распознать.

Совет: Иногда вы можете получить общее представление о версии файла SVG, щелкнув правой кнопкой мыши на файл, а затем выбрав «Свойства» (Windows) или «Получить информацию» (Mac OSX).

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

Даже если на вашем компьютере уже установлено No Cash GBA (No$GBA) или другое программное обеспечение, связанное с SVG, вы все равно можете столкнуться с проблемами во время открытия файлов Saved Game File. Если проблемы открытия файлов SVG до сих пор не устранены, возможно, причина кроется в других проблемах, не позволяющих открыть эти файлы. Такие проблемы включают (представлены в порядке от наиболее до наименее распространенных):

Третья попытка: консольные программы

Консольные программы — это программы без графической оболочки, которые запускаются из командной строки. Их можно запускать изнутри своего PHP-кода. Часто эту возможность ограничивают по соображениям безопасности. Но у меня эта возможность была.

Для начала я попробовал использовать всё тот же ImageMagick.

Как и с библиотекой ImageMagick программа зависала на некоторых файлах, и ничего не происходило. Видимо, что-то не так в самом ImageMagick, а не в его библиотеках.

sudo apt-get install inkscape

Для конвертации с его помощью нужно делать вот так:

Можно сконвертировать и сразу подогнать изображение под нужную ширину: SVG масштабируется без потерь.

Тестовый код заработал: Inkscape не зависал, как ImageMagick, SVG-файлы конвертировались в PNG. И работал почти в два раза быстрее. Использовал этот код для решения первоначальной задачи и сконвертировал несколько десятков тысяч SVG-файлов для актуального YML-фида: при его изменении новые картинки будут конвертироваться автоматически.

Inkspace может оказаться отличной рабочей альтернативой популярному ImageMagic для решения задач по программной работе.

Удручает, что задачу по конвертации форматов в принципе всё ещё приходится решать: конвертировать данные для экспорта в Google, Facebook, Yandex. Почему IT-гиганты на своей стороне не могут сделать поддержку SVG? Ведь и в их интересах, чтобы товары, объявления или новости на страницах их сервисов были дополнены графикой.

Риторический вопрос, но задача актуальная, хотя прошло уже 10 лет.

CANVAS vs SVG

	CANVAS	SVG
Формат	Растровый	Векторный
Масштабирование	Zoom	Scale
Доступ	Доступ к отдельным пикселям (RGBA)	Доступ к отдельным элементам (DOM)
Индексируемость и Accessibility	Виден только конечный растр (нельзя выделить фигуры, текст и т.п.) — плохо для Accessibility	Можно посмотреть структуру (например, вытащить весь текст)
Стилизация	Визуальные стили задаются при отрисовке через API	Визуальные стили задаются атрибутами, можно подключать CSS
Программирование	JS API для работы с примитивами	DOM для работы с элементами
Обновление	Для обновления — рисование поверх или полная перерисовка	Возможно изменение отдельных элементов
События	Нет легкого способа для обработки событий мыши. Объекты под курсором надо определять вручную.	Легко вешаются события от мыши через DOM, обрабатываются автоматически.
Интеграция кода	Код на JS отдельно от Canvas	Внутрь можно включать JS
Лучше подходит	Редактирование растровой графикиНаложение эффектов на графику/видеоГенерирование растровой графики (визуализация данных, фракталы, графики функций)Анализ изображениейИгровая графика (спрайты, фон и т.п.)	Масштабируемые интерфейсыИнтерактивные интерфейсыДиаграммы, схемыВекторное редактирование изображений

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

• Масштабирование: в отличие от растровой графики, SVG не теряет в качестве при масштабировании, поэтому ее удобно использовать для разработки под retina.
• Уменьшение HTTP-запросов: при использовании SVG сокращается количество обращений к серверу, соответственно увеличивается скорость загрузки сайта.
• Стайлинг и скриптинг: при помощи CSS можно менять параметры графики на сайте, например фон, прозрачность или границы.
• Анимация и редактирование: при помощи javascript можно анимировать SVG, а также редактировать в текстовом или графическом редакторе (InkScape или Adobe Illustrator).
• Малый размер: объекты SVG весят намного меньше растровых изображений.

Вторая попытка: Node.js

Если на PHP не выходит, значит, можно попробовать другой язык программирования — JavaScript. И его серверную версию Node.js.

При установке мы столкнулись с некоторыми сложностями: библиотеки и их зависимости были установлены, но при попытке сконвертировать SVG в PNG полетели ошибки. Для решения вновь придётся заниматься кропотливой установкой библиотек, соблюдать правильную версионность, искать причины ошибок в сети — на этот раз для node.js.

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

Но проблема многих модулей и программных библиотек — их несовместимость между собой. Авторы библиотек не успевают за изменениями друг друга. Да и компьютеры и операционные системы у всех разные.

Выход — отказаться от библиотек и использовать чужие готовые программы.

Чем отредактировать SVG рисунок?

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

Таблица со списком ПО для работы с векторной графикой, многие элементы списка поддерживают SVG:

Название	Разработчик	Цена
AutoTrace	Martin Weber	свободная
Easy Trace	Easy Trace Group	1500 €, 750 € upgrade
Freehand	Macromedia	$399, $99 upgrade
Illustrator	Adobe Systems	$499, $169 upgrade
MagicTracer	Elgorithms MagicTracer	$59
MST Viewer	MS Technology	Commercial Use Only
PhotoLine	Computerinsel GmbH	59 €
Potrace	Peter Selinger	свободная
R2V Toolkit	AlgoLab	$99
Ras2Vec	Davide Libenzi	свободная
Image2XAML	Roman Kalachik	свободная
Raster to Vector	Raster to Vector	$99
RasterVect	RasterVect	$79
RaveGrid	RaveGrid	свободная для персонального использования (доступна коммерческая версия)
Scan2CAD Pro	Softcover Intn’l	$469, $190 upgrade
Silhouette Pro	Free Soft S.A.	$359
Adobe Streamline	Adobe Systems	?
Vector Magic	Vector Magic	$7.95/mo, $295/lic, tokens
Vextractor	VextraSoft	$99
VPHybridCAD	softelec	$1400
WinTopo Freeware	SoftSoft	свободная
WiseImage	Consistent Software	$1400
RasVector	Daniel Lu	GPL
Xara Xtreme	Xara Group Ltd.	79$ Windows версия, Linux версия свободная
XTrace	Ronny Schütz	25$ for Amiga (доступна демоверсия)
VectorNow	AutoDWG	$120.00
DesignPresentation	DesignPresentation	Pay Per Use

Ниже — список самых популярных прогамм, позволяющих создавать и редактировать SVG.

Inkscape (Инкскейп)

Inkscape — программа для создания и редактирования векторных изображений, основная сфера применения — создание технических иллюстраций и схем. Написана на C++ и GTK+. Умеет сохранять созданные изображения в формат SVG 1.1. Inscape выпускается для многих платформ (Windows, Linux, Mac OS), относится к категории свободного программного обеспечения, распространяется на основе лицензии GNU General Public License.

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

Inkscape активно развивается уже много лет, разработчики контактируют и обмениваются опытом с коллегами из Gimp, Scribus.

Бесплатно скачать Inkscape для любой ОС можно на официальном сайте inkscape.org.

Image Magick

Почти весь функционал консольной утилиты для работы с графикой Image Magick распространяется и на SVG. Image Magick бесплатна, для множества приложений существуют библиотеки, позволяющие контактировать с этой утилитой через собственный интерфейс. Например — Imagick в PHP.

Платные программы для работы с SVG

Adobe Illustrator CS2

Разработанная программа Adobe Illustrator CS2 несет в себе достаточно мощные инструменты редактирования SVG. Программа не бесплатная и совсем недешевая, стоит больше 600 долларов, но имеет бесплатную демонстрационную версию, ограниченную 30 днями. На первый взгляд никаких особых преимуществ в области работы с SVG по сравнению с Inkscape не имеет, разве что любителям Photoshop понравится уровень сходства двух программ. Бсспорно, Adobe за долгое время своей работы создали самый удобный интерфейс для дизайнеров.

CorelDRAW Graphics Suite

С развитием SVG не могла остаться в стороне и Corel Corp. В состав пакета CorelDRAW Graphics Suite входит поддержка масштабируемой векторной графики. Стоимость — почти 300 долларов, но есть демонстрационная версия. Выпускается только для Windows.

Corel также предлагает купить Corel WebDraw (Jasc WebDraw), более ориентиванную на векторную веб-графику и профессиональных веб-дизайнеров программу. Стоимость — 180 долларов.

Sketsa SVG Editor

Программа полностью написана на Java, работает под Windows, Linux, Mac OS. В отличие от других программ для работы с векторной графикой в целом, Sketsa строго ориентирована на SVG. Имеет достаточно приятный и удобный интерфейс. Однако стоит почти 90 долларов.

Mayura Draw 4.3

Есть и более простые платные решения. Например — Mayura Draw за 39 долларов, размер дистрибутива — всего 1,3 мб. Программа поддерживает все основные инструменты для редактирования SVG графики, легкая и сравнительно быстрая.

Режим symbol

Принцип работы этого режима аналогичен предыдущему, но для задания элементов используется тег symbol. Этот элемент, согласно спецификации, может содержать атрибут , поэтому отпадает необходимость указывать его при использовании заданного символа. Также элементы, созданные с использованием , отображаются при рендере, что упрощает визуальный контроль созданных спрайтов. В остальном применение этого метода не отличается от Режима defs.

Пример использования

Преимущества: Аналогично предыдущему режиму (легкая смена цвета и размеров).

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

Вьюпорт

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

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

Если просто вставить SVG на страницу и не задавать ему никакие размеры, он отобразится размером 300px на 150px, что не поместилось — обрежется:

preserveAspectRatio

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

Например, с помощью значения можно указать, что сохранять пропорции не нужно:

SVG с и ведёт себя очень похоже на : при изменении размеров содержимое масштабируется под размеры вьюпорта не сохраняя пропорции.

будет полезно для резиновых фонов:

Остальные значения состоят из двух частей: первая задаёт выравнивание, вторая — поведение элемента относительно вьюпорта.

Выравнивание задаётся одним значением, определяющим положение по вертикали и по горизонтали, например: . Для обеих осей можно задать положение в начале, в середине и в конце:

, — в начале оси
, — в середине
, — в конце

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

Поведение элемента определяется второй частью . Возможные значения:

— содержимое стремится уместиться целиком (как фон с )
— содержимое заполняет собой всю область видимости (как : что не поместилось, обрежется)

Важно помнить, что не работает без. задает область, которая должна масштабироваться, определяет как именно она должна это делать

Также нужно понимать, что срабатывает, если вьюпорт и вьюбокс имеют разные соотношения сторон. Если соотношения сторон совпадают, и содержимое умещается без полей, работать не будет (в этом случае в нём просто нет необходимости).

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

Зачем преобразовывать SVG в PNG

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

Например, такие:

1. В фиды RSS, YML (Yandex Market Language) и Google Merchant бессмысленно передавать ссылки на SVG-файлы — они не умеют работать с этим форматом.
2. SVG нельзя использовать в OpenGraph (это такие вставки в HTML-код страницы, которые позволяют красиво репостить страницу в соцсети с предсказуемой иллюстрацией). Видимо, по той же причине: Facebook не работает с SVG.

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

Отображение векторных изображений на растровом экране — это, по сути, уже конвертация. Задача, казалось бы, тривиальная, но у меня, например, возникли неожиданные трудности.

У одного из наших клиентов (строительной компании) иллюстрации к продаваемой недвижимости были в SVG-формате: разнообразные чертежи и планы. И мы должны были сконвертировать векторные изображения SVG в растровые PNG — для больших YML-фидов, чтобы импортировать эти существенные объёмы данных в Mindbox и там создать товарные рекомендации, которые в дальнейшем вставлять в рассылки.

Задача конвертации SVG в PNG довольно типовая — в сети масса статей на эту тему с примерами кода. Неразумно использовать свою реализацию алгоритма растеризации SVG: сложно, долго и — словно изобретать велосипед. Нужно использовать готовые библиотеки.

Какие факторы влияют на выбор высоты расположения телевизора на стене

Бесплатные векторные редакторы

Какие есть бесплатные векторные редакторы

Наиболее популярным является редактор Inkscape, который при своей бесплатности предоставляет массу возможностей, в том числе для профессионального использования. Также неплохой функциональностью обладают графические редакторы Draw, входящие в офисные пакеты ApacheOpenOffice.org и LibreOffice.

Редактор Inkscape

Бесплатный, простой, кроссплатформенный, поддерживает SVG, доступны расширения – все это про Inkscape. Скачать его можно со страницы https://inkscape.org/ru/download/.

Нужно выбрать версию для своей операционной системы и нажать на соответствующую иконку. На открывшейся странице нужно выбрать версию продукта. Для Windows этот выбор выглядит так.

Со встроенной справкой дела обстоят лучше. Меню Справка – Учебник открывает подробное руководство по операциям.

Причем вся справка также выполнена в виде рисунков. Интересное решение.

Меню Справка – Руководство по Inkscape открывает в браузере страницу http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.php. Чтобы разобраться с ней, снова потребуется знание английского.

По умолчанию в редакторе используется сочетание Ctrl + N, можно также использовать меню Файл – Создать.

Как импортировать растровый рисунок в Inkscape

Загрузка растровых изображений осуществляется через меню Файл – Импортировать (или Ctrl + I). Откроется стандартное окно выбора документа, в котором нужно указать исходный рисунок.

Дополнительно нужно указать параметры для импорта. Можно оставить их по умолчанию.

Как преобразовать растровый рисунок в SVGв Inkscape

Чтобы превратить загруженное растровое изображение в набор кривых, нужно использовать меню Контур – Векторизовать пиксельную графику.

Альтернативный вариант дает меню Контур – Векторизовать растр

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

Как сохранить рисунок в Inkscape

Сохранение реализовано через меню Файл – Сохранить. Откроется стандартное окно, в котором нужно указать место хранения файла и его название.

Способ 3: Method

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

1. При открытии вкладки редактора наведите курсор на меню «File» и выберите пункт «Open SVG».

Откроется «Проводник», где отыщите нужное изображение.

Подтвердите открытие нового файла.

Теперь вы можете посмотреть на изображение в отдельном блоке.

Инструментами с левой панели редактируйте содержимое.

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

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

Если нажать на активный цвет, откроется отдельное окно, где выбор подходящего оттенка происходит в более гибком варианте.

По завершении через то же меню «File» сохраните изображение или экспортируйте его как PNG-файл.

Подробнее: Открываем файлы векторной графики SVG

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Резюме файла SVG

Согласно нашим записям, существуют два тип(ы) файлов, связанных с расширением SVG, самый популярный из которых отформатирован в качестве Saved Game File. Самое распространенное связанное приложение — No Cash GBA (No$GBA), выпущенное Martin Korth. Кроме того, два различные программы позволяют вам просматривать эти файлы.
Большинство файлов SVG относятся к Game Files, однако они также могут относится к Vector Image Files.

Просматривать файлы SVG можно с помощью операционных систем Windows, Mac и Linux. Они обычно находятся на настольных компьютерах (и ряде мобильных устройств) и позволяют просматривать и иногда редактировать эти файлы.

Рейтинг популярности файлов SVG составляет «Низкий», что означает, что данные файлы встречаются редко.

Программа №2: Adobe Illustrator

Программа Adobe Illustrator более популярна, чем GIMP, но у нее есть один недостаток — платная подписка, которая требует немалых финансовых затрат. Но ее счастливым обладателям она поможет открыть файл SVG, чем сейчас мы и займемся.

1. Запустите приложение и, открыв меню «Файл», нажмите по пункту «Открыть». Или же воспользуйтесь уже известной комбинацией Ctrl+O.
2. В окне файлового менеджера, которое появится после ранее выполненных действий, вам нужно перейти в папку с файлом SVG и открыть его, нажав дважды ЛКМ.
3. Следом за этим должно появится окно «Отсутствует профиль». Случается это не всегда, но очень часто. В нем вам необходимо выбрать пункт «Оставить без изменений» и нажать кнопку «ОК». Если вы разбираетесь во всех нюансах, то можете задать параметры самостоятельно, выбрав второй пункт.

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

Системы координат

В SVG-документе есть две системы координат:

1. Система координат области отрисовки — viewport space.
2. Система координат содержимого — user space.

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

По умолчанию система координат содержимого соответствует системе координат вьюпорта, а единицы измерения содержимого — единицам измерения вьюпорта, но при использовании трансформаций или масштабируется вся система координат с единицами измерения, то есть пиксели из user space больше не равны пикселям из viewport space.

Поизменяйте размеры элемента и посмотрите что происходит с системой координат содержимого (она показана бирюзовым):

Система координат содержимого начинается из точки 0,0, и если вьюпорт и вьюбокс не совпадают, точка отсчета, как и вся система координат содержимого, будет ездить и масштабироватся вместе с вьюбоксом.

Масштабирование единиц измерения хорошо видно на примере обводки: изначально её толщина равна единице, но при изменении размеров видимая толщина обводки будет изменяться вместе с фигурой:

Если такое поведение нежелательно, это можно исправить с помощью свойства со значением , оно добавляется к содержимому SVG:

можно задавать как атрибутом, так и в CSS.

Также новая система координат создается при добавлении трансформаций:

Внутри трансформируемого элемента будет своя своя система координат, отличная от систем координат вьюпорта и вьюбокса.

Тема может выглядеть сложной, но на самом деле, достаточно немного поиграться с кодом, и всё станет понятно. Для лучшего понимания систем координат, размеров и трансформаций в SVG рекомендую демо Сары Суайдан, а также её статьи:

• Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio
• Understanding SVG Coordinate Systems and Transformations (Part 2) — The transform Attribute
• Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewports