Справочник svg элементов

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

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

Иконки

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

Логотипы

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

Иллюстрации

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

Анимации и элементы интерфейса

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

Инфографика и визуализация данных

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

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

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

Основные преобразования SVG-элементов

Все преобразования задаются в атрибуте transform SVG-элемента.
Можно указать несколько пребразований через пробел.

translate()
rotate()
scale()
skewX() и skewY()
matrix()

Перемещение

Элемент можно переместить на x пикселей по вправо и y пикселей вниз с помощью функции translate(x,y).

В примере, приведенном ниже, прямоугольник передвигается из точки (2,2) в точку (92,17).

Поворот

Элемент можно повернуть при помощи функции rotate(x), где x – угол поворота в градусах относительно начала координат.
Если x>0, то поворт по часовой стрелке, если x<0, то поворот против часовой стрелке.

В примере, приведенном ниже, квадрат поворачивается на 5° относительно точки (0,0).

Масштабирование

Изменить размер элемента можно с помощью функции scale(x,y),
где x – коэффициент масштабирования по оси Х, а y – по оси Y.
Если коэффициенты совпадают, то указывают только один параметр.

Обратите внимание на то, что в примере, приведенном ниже, квадрат не только уменьшается в два раза, но и перемещается из точки (100,10)
в точку (50,5).

SVG-теги

<svg>

Тег внедряет SVG-документ внутрь текущего документа, например, HTML. Тег имеет свои координаты X и Y, высоту и ширину, и свой уникальный id.

Вот как он может выглядеть:

<g>

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

Вот пример тега :

<rect>

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

Вот пример тега :

<use>

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

Вот пример тега :

<path>

Элемент определяет путь, состоящий из координат точек для формирования фигуры. Код с использованием может казаться магией, но не пугайтесь! В примере ниже код можно прочесть как:

1. «M150 0» — переместись на (150,0);
2. «L75 200» — нарисуй линию к (75,200) от предыдущей точки (которая имела координаты (150,0));
3. «L255 200» — нарисуй линию к (225,200) от предыдущей точки (которая имела координаты (75,200));
4. «Z» — закрой путь (нарисуй линию к начальной точке).

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

Вот пример тега :

<symbol>

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

Вот пример тега :

Как конвертировать SVG-файл

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

Например, если ваш SVG-файл довольно мал, вы можете загрузить его на веб-сайт для конвертации файлов, например Zamzar, который может конвертировать SVG-файлы в PNG, PDF, JPG, GIF и пару других графических форматов. Нам нравится Zamzar, потому что вам не нужно загружать конвертер, прежде чем вы сможете его использовать, — он полностью работает в вашем веб-браузере, поэтому вам просто нужно загрузить преобразованный файл.

Autotracer.org — это еще один онлайн-конвертер SVG, который позволяет конвертировать онлайн-SVG (с вашего компьютера или через его URL) в другие форматы, такие как EPS, AI, DXF, PDF, SK и т. Д.

Онлайн-конвертеры SVG также полезны, если у вас нет установленного SVG-редактора / редактора. Итак, если вы находите файл SVG онлайн, который вы хотите в формате PNG, например, чтобы вы могли легко поделиться им или использовать его в редакторе изображений, который поддерживает PNG, вы можете конвертировать SVG-файл без необходимости установки SVG-просмотра.

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

Один пример — с Inkscape — после того, как вы открываете / редактируете файл SVG, вы можете сохранить его обратно в SVG, а также в другой формат файла, такой как PNG, PDF, DXF, ODG, EPS, TAR, PS, HPGL и многие другие. ,

Достоинства SVG

• Графика в формате SVG создается с использованием математических формул, которые при изменении размера изображения можно скорректировать.
  Таким образом векторные изображения масштабируются лучше, чем растровые.
• Размер векторной картинки обычно меньше, чем у сравнимых по качеству изображений в форматах JPEG, GIF или PNG.
• SVG графика имеет текстовый формат, который можно и править в блокноте, и рисовать в графических векторных редакторах Adobe Illustrator, CorelDRAW.
• Cкрипты и анимация в SVG позволяют создавать динамичную и интерактивную графику.
• Текст в графике SVG является текстом, а не изображением, поэтому он индексируется поисковыми системами.
• В SVG изображение можно добавить несколько ссылок.
• К SVG формату можно подключать внешние таблицы стилей CSS, глобальные стили внутри контейнера <style>…</style>
  или добавлять внутренние стили с помощью атрибута style в тегах фигур и путей.

Вставка SVG на Web-страницу

SVG-изображение можно вставить на Web-страницу несколькими способами. Первый из них – это простая вставка SVG-кода на страницу
(при большой картинке HTML-код страницы станет огромным и трудно читаемым). При других способах сначала надо сохранить
SVG-код в файле с расширением .svg.

Итак, способы вставки SVG-изображения на Web-страницу:

• прямая вставка кода в HTML-документ в контейнере <svg>…</svg>;
• использование SVG-файла в качестве фонового изображения;
• подключение SVG-файла в HTML-документ с помощью тегов img, embed, object и iframe;
• подключение SVG-файла в PHP-документ с помощью функции include.

Внешние SVG-файлы

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

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

Если хотите попробовать, скачайте любую из иконок Чикина и добавьте на сайт через тег — увидите, как это красиво. Не забудьте указать width и height, чтобы векторная картинка знала, в каком размере отрисовываться. 

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

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

Линия

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

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

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

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

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

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

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

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

sudo apt-get install inkscape

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

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

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

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

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

Дополнительная информация о файлах SVG

Формат Scalable Vector Graphics был создан в 1999 году и до сих пор разрабатывается консорциумом World Wide Web (W3C).

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

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

Недостатки SVG формата

• С увеличением количества мелких деталей в изображении, быстрее растёт размер файла SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ в размере файла, но даже имеет проигрыш по отношению к растровому формату. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.
• Трудность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
• В настоящее время SVG формат применяется в Интернете сравнительно мало, из-за недостаточной кроссбраузерности. Лучше всего обстоят дела у Mozilla Firefox со встроенным просмотрщиком SVG, так как ее разработчики находятся в рабочей группе Консорциума Всемирной паутины (W3C) по разработке и внедрению стандарта SVG. Хуже всего дела по поддержке формата SVG у Microsoft, которая покинула группу 2003 г. Для Internet Explorer – необходим Adobe SVG Viewer (ASV). С 9 версии IE частично поддерживает функции SVG.
  Браузеры Apple Safari, Google Chrome намного лучше поддерживают SVG, но не полностью, так как SVG – это большая спецификация (вдвое больше HTML 4.01), именно поэтому разработчики браузеров внедряют функции постепенно, от версии к версии. Но абсолютно все разработчики современных браузеров заявляют, что за форматом SVG будущее в области графики вебдизайна.

UPD. Добавлен новый раздел онлайн генераторы SVG кода path.следующая: Структура SVG документа ⇛

Как работать с файлами SVG

Если вы не слишком в восторге от всей XML-стороны SVG, это нормально. Вы можете просматривать и изменять изображения SVG, не касаясь кода. Вот как:

Как открыть файл SVG

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

Как создать или отредактировать файл SVG

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

• Adobe Illustrator, программа Adobe для создания и редактирования векторной графики. Вы можете экспортировать проекты Adobe как SVG или в несколько растровых форматов.
• Microsoft Visio, блок-схема, диаграмма и создатель инфографики.
• CorelDRAW, еще один специализированный редактор векторной графики.
• GIMP (GNU Image Manipulation Program), бесплатная, популярная программа для редактирования изображений с открытым исходным кодом.
• Google Docs – вы можете экспортировать рисунки, созданные в Google docs, в SVG.
• Inkscape, бесплатный векторный инструмент для рисования и текста.

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

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

Взаимодействие SVG, XML с HTML, CSS, Jscript

В SVG, как и в HTML можно добавлять ссылки на внешние ресурсы. Но если в HTML одна картинка может служить только для одной внешней ссылки, то в SVG документ можно добавлять сколько угодно внешних ссылок . Картинка кликабельна.
Внутрь HTML страницы легко встраивается код SVG документа или целиком подключается внешний SVG файл. Можно наоборот, внутри SVG файла разместить код HTML внутри тегов foreignObject. Получаются интересные эффекты: Внутри SVG файла находится работающий внешний HTML сайт. К SVG формату можно подключать внешние таблицы стилей CSS 2.0, что позволяет управлять сразу несколькими файлами *.svg. Также вполне допустимо подключение стилей внутри файла *.svg внутри тегов style или использовать внутренние стили непосредственно внутри командных строк фигур и путей.
SVG, как любой основанный на XML формат, позволяет использовать для его обработки таблицы трансформации (XSLT).
Преобразуя XML-данные в SVG с помощью простого XSL, можно получить графическое представление текстовых данных, например визуализировать графики, круговые диаграммы, гистограммы и т.д.

Конвертеры SVG в PNG

Просмотреть файл SVG как обычную картинку можно просто перетащив его на окно браузера, но бывает и так, что SVG-документ необходимо сконвертировать в более доступный и привычный графический формат, скажем, PNG. Если конвертируемых файлов много, есть смысл воспользоваться бесплатной тулзой SVG2PNG, позволяющей преобразовывать SVG в PNG в пакетном режиме. Чтобы конвертировать SVG в PNG, запустите утилиту, перетащите в ее окно векторные файлы, нажмите «Start» и получите результат.

В остальных случаях будет меньше мороки, если воспользуетесь бесплатными конвертерами SVG в PNG, работающими в режиме онлайн. В частности, это svgtopng.com/ru, convertio.co/ru/svg-png и image.online-convert.com/ru/convert-to-png.

Какой из них удобнее, решайте сами. Все эти три конвертера бесплатны и поддерживают работу в пакетном режиме, а Online-Convert вдобавок ко всему еще предоставляет возможность гибкой настройки выходных параметров PNG-файла.

Зачем преобразовывать 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: сложно, долго и — словно изобретать велосипед. Нужно использовать готовые библиотеки.

Способ 1: RapidTables

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

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

Отобразится окно «Проводника», в котором и следует выбрать подходящую картинку.

Ознакомьтесь с ее содержимым в блоке «View».

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

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

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

Осторожно подходите к процессу редактирования, а если что-то вдруг пошло не так, сразу же возвращайте картинку к исходному состоянию, чтобы не нарушить ее целостность. Если вы впервые сталкиваетесь с такой задачей, ознакомьтесь с информацией в интернете или переходите к Способу 3, где изменение осуществляется при помощи стандартных графических инструментов

Основные формы

Чтобы вставить форму, нужно создать элемент в документе. Разные элементы соответствуют разным формам и требуют разные атрибуты для описания размера и положения этих форм. Некоторые немного громоздки, поскольку могут быть созданы другими формами, но для удобства они все здесь приведены и способствуют сохранению документов SVG настолько короткими и читаемыми, насколько это возможно. Все основные формы показаны на изображении справа. Код для генерации выглядит как-то так:

Замечание: Атрибуты , и описываются в руководстве далее.

Элемент rect делает как раз то, что вы и ожидаете, то есть рисует прямоугольник на экране. Существуют только 6 основных атрибутов, которые контролируют положение и форму прямоугольника на экране. Ранее показанное изображение отображает два элемента rect, которые выглядят немного лишними. Один справа имеет набор атрибутов rx и ry, которые отвечают за округлые углы. Если этого набора нет, то по умолчанию они принимаются равными 0.

x

Положение x верхнего левого угла прямоугольника.

y

Положение y верхнего левого угла прямоугольника.

width

Ширина прямоугольника

height

Высота прямоугольника

rx

Радиус x углов прямоугольника

ry

Радиус y углов прямоугольника

Как вы могли предположить, элемент circle рисует окружность на экране. Существует 3 атрибута для описания этого элемента.

r

Радиус окружности.

cx

Положение x центра окружности.

cy

Положение y центра окружности.

Ellipse — это наиболее общая форма элемента окружность, в котором можно масштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.

rx

Радиус x эллипса.

ry

Радиус y эллипса.

cx

Положение x центра эллипса.

cy

Положение y центра эллипса.

Line изображает простую прямую линию. Её атрибутами являются две точки, которые определяют начальную и конечную точки линии.

x1

Положение x точки 1.

y1

Положение y точки 1.

x2

Положение x точки 2.

y2

Положение y точки 2.

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

точки

Список точек, каждая разделённая пробелом, запятой,  EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: «0 0, 1 1, 2 2».

Элемент polygon очень похож на элемент polyline в том, что они образованы сегментами прямых линий, соединяющими список точек. Но для многоугольников путь автоматически возвращается к первой точке в конце, создавая тем самым замкнутую форму. Следует отметить, что прямоугольник является частным случаем многоугольника, поэтому polygon можно использовать для создания элемента в случаях, когда необходимо большая гибкость.

точки

Список точек, каждая разделённая пробелом, запятой,  EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан как: «0 0, 1 1, 2 2». Полигон замыкается финальной прямой линией от (2,2) до (0,0).

Path, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закруглёнными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно в следующей секции этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.

d

Список точек и другой информации о том, как рисовать путь. Для подробной информации смотри секцию Пути.

• « Предыдущая статья
• Следующая статья »

Поддержка в браузерах

SVG имеет хорошую поддержку в большинстве современных браузеров, за исключением IE версии 8 и более ранних. Но задачу можно решить с помощью библиотеки JavaScript Raphael.js. Для облегчения работы можно воспользоваться инструментом ReadySetRaphael.com для конвертации кода SVG в формат Raphael.

Сначала загружаем и включаем библиотеку Raphael.js в документ HTML. Затем загружаем файл , копируем и вставляем полученный код в функцию после загрузки:

window.onload=function() { 
	// Код Raphael размещается здесь
}

В теге размещаем следующий элемент с идентификатором .

<div id="rsr"></div>

И все готово.

В следующем уроке серии мы рассмотрим, как определять стили для объектов SVG в CSS.

CSS3-анимация

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

CSS-анимация предлагает множество типов анимации, которые вы можете выбрать. Линейная анимация — это ещё один крутой атрибут SVG.

Для следующего примера я написала текст «Hi, I am Surbhi», используя инструмент «Pen» в редакторе. Затем я использовала ключевые кадры из CSS3 для создания анимации.

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

Что за формат SVG и где используется

Разработанный в 2001 году Консорциумом Всемирной паутины, формат SVG представляет собой не совсем обычный документ. В его основу положены языки разметки VML и PGML, то есть речь идет, по сути, о текстовом файле. При этом редакторы и браузеры интерпретируют SVG как изображение, которое может быть как статическим, так и анимированным. Будучи наиболее распространенным среди прочих форматов, предназначенных для хранения векторной графики, в настоящее время SVG активно используется для хранения и распространения векторных и смешанных изображений в интернете.

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

С другой стороны SVG наследует недостатки XML со всеми вытекающими. Формат плохо подходит для создания сложных объектов, так как файлы SVG быстро «набирают» вес, если состоят из множества мелких деталей. Кроме того, для отображения картинки программам нужно читать весь документ, что затрудняет применение формата в картографических приложениях. Среди недостатков формата отмечаем относительно низкую кроссбраузерность и отсутствие хотя бы минимальной поддержки трехмерной графики.

Первая попытка: PHP с библиотекой ImageMagick

С этой библиотекой код конвертации SVG в PNG кажется элементарным:

Но он не заработал. Оказывается, поддержка SVG в ImageMagick не включена по умолчанию, и необходимо подключить ещё одну библиотеку libmagickcore-6.q16-3-extra. К счастью, на нашем хостинге операционная система Debian Linux, которая позволяет устанавливать любые программы и библиотеки без ограничений.

Ставлю:

sudo apt-get install libmagickcore-6.q16-3-extra

Появилась поддержка SVG. Тестовый код заработал. Но когда я таким способом стал массово конвертировать файлы, программа споткнулась на одном подозрительном файле: она просто остановилась, и ничего не происходило. Ошибка не показывалась, скрипт продолжал «висеть».

Я попробовал для начала просто пропустить этот файл, не конвертировать. Может он один такой аномальный? Но оказалось, что подобных файлов, на которых спотыкается строка $imagick->readImageFile, больше 5%. Это много.

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

Возможно обновление библиотеки ImageMagick до какой-то версии могло решить эту проблему. Но не стоит заниматься установкой/удалением множества библиотек ради решения одной задачи. Это может повлиять на работоспособность всего хостинга из-за неожиданных конфликтов на других сайтах и программах, использующих ImageMagic текущей версии.

Базовые SVG-элементы

line
polyline
polygon
rect
circle
ellipse
path

Общие атрибуты тегов SVG-элементов

stroke

Цвет линии

stroke-width

Толщина линии

stroke-linecap

Стиль концов линии.
Возможные значения атрибута:

• round – по форме круга;
• square – по форме квадрата.

Например:

РЕЗУЛЬТАТ:

stroke-dasharray

Чередование штрихов и пробелов в пунктирной линии. Например:

РЕЗУЛЬТАТ:

stroke-dashoffset

Сдвиг пунктира. Например:

РЕЗУЛЬТАТ:

fill

Цвет заливки (none – без заливки)

fill-opacity

Прозрачность заливки (от 0 до 1)

fill-rule

Правило заливки.
Возможные значения атрибута:

• nonzero – сплошная заливка;
• evenodd – внутренняя часть фигуры не заливается.

style

Стиль элемента

class

Класс элемента