Как создать svg файл
Битовые форматы изображения для Интернета (GIF, JPEG, WBMP и PNG) описывают изображения с помощью сетки пикселей. Файлы получаются большими с одним (часто низким) разрешением и занимают значительную часть полосы пропускания. В отличие от этого, SVG — это векторный формат, описывающий изображения как фигуры, контуры, текст и эффекты фильтра. Полученные файлы компактны и обеспечивают качественную графику в Интернете, на печати и даже портативных устройствах с ограниченными ресурсами. Пользователи могут увеличить изображение SVG на экране без потери резкости, деталей или четкости. Кроме того, формат SVG отлично поддерживает текст и цвета, и пользователи всегда видят изображения таким, как оно выглядит в монтажной области Illustrator.
Формат SVG полностью основан на XML и дает много преимуществ разработчикам и пользователям. С форматом SVG можно использовать XML и JavaScript для создания веб-графики, отвечающей на действия пользователя такими сложными эффектами, как подсветка, всплывающие подсказки, звуки, анимация и т. п.
Можно сохранить работу в формате SVG, используя команду «Сохранить», Сохранить как , «Сохранить копию» или Сохранить для Web и устройств . Для доступа к полному набору параметров экспорта в формате SVG используйте команды «Сохранить», Сохранить как или «Сохранить копию». Команда Сохранить для Web и устройств предоставляет ограниченный набор параметров экспорта в формате SVG (только те, которые используются для работы в Интернете).
Настройки объекта в Illustrator влияют на то, каким будет файл SVG. Помните следующие рекомендации.
Используйте слои для добавления структуры в файл SVG. Если объект сохраняется в формате SVG, каждый слой преобразуется в групповой элемент (<g>). (Например, слой «Button1» становится <g id="Button1_ver3.0">.) Вложенные слои становятся вложенными группами SVG, а скрытые слои сохраняются со свойством «отображение: нет» стиля SVG.
Если нужно, чтобы объекты на разных слоях выглядели прозрачными, корректируйте непрозрачность каждого объекта, а не каждого слоя. Если непрозрачность меняется на уровне слоя, итоговый файл SVG не покажет прозрачность так, как она выглядит в Illustrator.
Растровые данные не масштабируются в средстве просмотра SVG и не могут отредактироваться, как другие элементы SVG. Старайтесь не создавать объекты, которые будут растрироваться в файле SVG. Сетчатые градиенты и объекты с градиентной заливкой, использующие эффекты «Растрировать», «Имитация», «Размытие», «Штрихи», «Искажение», «Оформление», «Резкость», «Эскиз», «Стилизация», «Текстура» и «Видео», растрируются при сохранении в формате SVG. Графические стили с этими эффектами также вызывают растрирование. Добавляя графические объекты, используйте эффекты SVG, не вызывающие растрирования.
Для повышения производительности файла SVG используйте символы в объекте и упрощайте контуры. Кроме того, если в первую очередь требуется производительность, старайтесь не пользоваться кистями, которые производят большое количество данных контура («Угольно-серый», «Пепел», «Ручка»).
Используйте фрагменты, карты ссылок и сценарии для добавления веб-ссылок в файл SVG.
Язык сценариев (например, JavaScript) открывает неограниченные функциональные возможности для файла SVG. Перемещения с помощью курсора и клавиатуры могут вызвать сценарные функции (например, эффекты прокрутки). Сценарии могут также использовать объектную модель документов (DOM) для обращения к файлу SVG и внесения изменений (например, для вставки или удаления элементов SVG).
Эффекты SVG можно использовать для добавления в объект таких графических свойств, как тени. Эффекты SVG отличаются от битовых эквивалентов тем, что они основаны на XML и не зависят от разрешения. Фактически, эффект SVG — это не что иное, как серия свойств XML, описывающих различные математические операции. Полученный эффект визуализируется для целевого объекта, а не для исходной графики.
Illustrator предоставляет набор эффектов SVG по умолчанию. Можно использовать эффекты с их свойствами по умолчанию, отредактировать код XML для создания пользовательских эффектов или написать код для новых эффектов SVG.
Чтобы изменить фильтры SVG, которые Illustrator использует по умолчанию, используйте текстовый редактор для редактирования файла Adobe SVG Filters.svg в папке Documents and Settings/<каталог_пользователя>/Application Data/Adobe/Adobe Illustrator CS5 Settings/<язык>. Можно изменить или удалить существующие определения фильтра, а также добавить новые.
Выберите объект или группу (или назначьте слой на палитре «Слои»).Для применения эффекта с параметрами по умолчанию выберите эффект в нижней части вложенного меню Эффект > Фильтры SVG .
Для применения эффекта с параметрами пользователя выберите Эффект > Фильтры SVG > Применить фильтр SVG . Выберите эффект в диалоговом окне и нажмите кнопку «Редактировать SVG-фильтр» . Отредактируйте код по умолчанию и нажмите кнопку ОК .
Для создания и применения нового эффекта выберите Эффект > Фильтры SVG > Применить фильтр SVG . В диалоговом окне нажмите кнопку «Новый фильтр SVG» и новый код и нажмите ОК .
Если применяется эффект «Фильтр SVG», Illustrator отображает растрированную версию эффекта на монтажной области. Можно контролировать разрешение миниатюры, изменяя параметр разрешения растрирования документа.
Примечание. Если объект использует несколько эффектов, эффект SVG должен быть последним. Другими словами, он должен отображаться в нижней части палитры «Отображение» (над записью «Прозрачность»). Если SVG-эффект сопровождается другими эффектами, вывод SVG будет осуществлен в виде растрового объекта.
Использование SVG для стилизации веб-сайтов открывает целый мир новых возможностей. Это отличный способ сделать дизайн уникальным и удобным для пользователей. Одно из самых больших преимуществ SVG – его гибкость и возможность изменять внутренние элементы изображения при помощи CSS. Вы можете создавать многоцветные значки и иллюстрации, а также анимировать их с помощью JavaScript или все того же CSS. SVG – векторный формат. Он масштабируется без потери качества, а правильно оптимизированная картинка мало весит. На примере небольшой иконки мы рассмотрим, как нужно работать с такими изображениями.
Создание SVG
Самый простой способ создать SVG – написать код:
Мы возьмем Illustrator. Как в любом приложении для работы с векторной графикой, большинство клиентских логотипов или иллюстраций представлены здесь в виде файлов AI, поэтому их можно легко открыть и экспортировать в SVG.
Для начала нужно создать новый веб-документ:
Размер холста – 400х400 пикселей. Размер на самом деле не имеет значения, потому что это вектор, но лучше оставить его в пределах, которые вы ожидаете увидеть в браузере. Будет легче поддерживать размер штриха и менять его, по сравнению с базовым. Далее создадим значок:
При построении изображения можно использовать штрихи, различные цвета и даже градиенты. Все это будет экспортировано в SVG. Если вы планируете анимировать отдельные элементы значка, необходимо назвать слои и группы:
После экспорта имена будут преобразованы в идентификаторы: это будет полезно для более сложных иллюстраций. Лучше всего изменить идентификаторы на классы для внутренних элементов. Вы по-прежнему сможете использовать идентификатор для основного элемента <svg> , но им будет легче управлять, если пути и формы имеют классы.
Экспорт и оптимизация SVG-файлов
Когда значок будет готов, нужно экспортировать его в SVG. Для этого перейдите в: Файл -> Экспорт -> Экспортировать как .
Если вы хотите, чтобы холст SVG был того же же размера, что и монтажная область, или если вы экспортируете несколько значков из одного документа, установите флажок «Использовать монтажные области». В противном случае Illustrator обрежет холст до размера содержимого. Лучше всегда использовать размер артборда. Изображение будет легче поддерживать, если оно имеет определенный размер, особенно если нужно изменить или обновить иконку. Вы можете экспортировать его снова с тем же размером монтажной области.
Затем перед вами появится окно с параметрами для кода SVG:
В первом раскрывающемся списке необходимо выбрать способ создания CSS. Если у вас всего несколько элементов, лучше поставить «Inline style». Для более сложных иллюстраций есть «Internal CSS». Если вы не хотите использовать имена слоев и групп в качестве идентификаторов, измените раскрывающееся меню «Object IDs» на «Minimal». Это нужно для минимизации кода SVG перед отправкой в production. Если вы работаете над анимацией и хотите иметь более чистый код, снимите этот флажок.
После выбора опций экспортированный код значка выглядит примерно так:
Теперь необходимо изменить идентификаторы внутренних элементов на классы и добавить некоторые атрибуты для лучшей доступности:
Файлы SVG не занимают много места, что может улучшить скорость загрузки страницы. Если вы хотите еще больше их оптимизировать, попробуйте отличный инструмент – SVGOMG .
Вы можете загрузить в него файл SVG и получить множество дополнительных опций его тонкой настройки. Будьте осторожны: если вы зайдете слишком далеко в настройке изображения, нарушите дизайн. Если у вас уже есть стили или анимация, убедитесь, что не потеряете после оптимизации классы и элементы.
Анимация и манипуляции с CSS
После добавления кода SVG на страницу, необходимо стилизовать его как и любой другой элемент HTML. Например так:
Вы без труда найдете множество библиотек JavaScript (Svg.js, SnapSVG) для создания сложных анимаций, однако в большинстве случаев добиться интересного эффекта можно, используя только свойства opacity, scale, translate и colors.
Далее создадим простую анимацию для круга:
Это простая масштабная анимация в сочетании с непрозрачностью. Если у вас есть несколько значков с похожим кругом, вы можете повторно использовать тот же код, что сэкономит много времени и усилий. Именно поэтому использование классов для отдельных элементов предпочтительнее уникальных идентификаторов.
Теперь посмотрим на анимацию значка галочки:
Дальше немного сложнее. Здесь мы используем stroke-dasharray и stroke-offset , чтобы создать эффект отрисовки значка. Подробнее этот метод описан в специальном руководстве . Также мы применяем масштабирование и меняем цвет обводки: как видите, код очень простой, но он дает довольно интересный эффект:
Результаты наших экспериментов можно увидеть здесь .
Мы привели очень простой пример, однако он показывает потенциал SVG для веб-проектов. Есть много разных способов использования популярного формата изображений и векторной анимации. Также существует неплохая спецификация этого, по сути, языка разметки XML и несколько справочников SVG-элементов и SVG-интерфейсов , с которыми читателям будет полезно ознакомиться.
Вы можете считать Масштабируемую Векторную Графику (Scalable Vector Graphics — SVG) отзывчивой графикой. SVG основан на формате XML, который позволяет создавать изображение, используя определённые теги и атрибуты. Ваш код сгенерирует изображение, которое можно изменять прямо в текстовом редакторе.
Флаг Японии сделанный с помощью SVG
Это пример SVG. Если посмотреть на его исходный код, то можно заметить, что он состоит из тегов и атрибутов так же, как и в HTML-документе. Все они находятся внутри тега <svg> . Здесь есть тег <rect> , рисующий прямоугольник с чёрной рамкой и белым цветом фона. И внутри него эллипс (почти что круг, но обратите внимание на атрибуты <ry> и <rx> ), который залит красным цветом.
SVG в вебе можно использовать двумя способами. Например, использовать SVG-файлы в атрибуте src тега <img> . То есть мы получим <img src="japan.svg"> — точно так же, как с PNG или JPEG-изображениями.
Но более интересное использование заключается в том, что мы можем вставлять SVG напрямую в <div> внутрь HTML-кода. Мы можем стилизовать эти блоки (или даже группы таких блоков) как захотим. Можем использовать CSS, анимацию или даже добавить интерактивности с помощью JavaScript. Это то, что прямо сейчас делает SVG одним из самых универсальных и крутых элементов в HTML.
SVG бесконечно масштабируем, отзывчив, имеет очень маленький размер файла, перспективен для следующего поколения экранов с неисчислимой плотностью пикселей и может быть стилизован, анимирован и оживлён при помощи известных веб-технологий — CSS и JavaScript.
Все эти вещи ранее были возможны только с использованием Flash, для которого требовался flash-плеер и много сложной работы. К тому же сейчас никто не любит использовать Flash.
Векторные картинки против растровых
Растровые картинки состоят из пикселей, создающих целостное изображение. JPEG, GIF и PNG — самые распространённые типы растровых изображений.
Растровые изображения состоят из фиксированного числа пикселей, поэтому изменение размера картинки невозможно без влияния на её качество. Вы наверняка замечали, что изменение размера таких изображений делает их зернистыми и размытыми. Всё это происходит из-за фиксированного количества пикселей.
Вот что происходит при увеличении растрового изображения:
Что происходит при увеличении растрового изображения
С другой стороны, векторное изображение является гибким и не зависит от разрешения устройства. Они построены на использовании геометрических фигур — линий, прямоугольников, кривых или последовательности команд. Вы можете изменять их атрибуты, такие как цвет, заливка и рамка.
Один из самых распространённых вариантов использования векторных изображений — это иконки и анимация маленьких иконок. Они всегда будут чёткими даже на дисплеях с самой высокой плотностью пикселей, таких как новые 4K смартфоны.
Вот что происходит при увеличении векторного изображения:
Что происходит при увеличении векторного изображения
SVG-теги
Тег <svg> внедряет SVG-документ внутрь текущего документа, например, HTML. Тег имеет свои координаты X и Y, высоту и ширину, и свой уникальный id.
Вот как он может выглядеть:
Тег <g> группирует элементы вместе и ведёт себя как контейнер для связанных графических элементов. Элемент <g> также может содержать в себе другие элементы <g> , которые будут вложены в него.
Вот пример тега <g> :
Элемент <rect> представляет собой базовую фигуру SVG — прямоугольник. Он может иметь различные атрибуты, такие как координаты, высота, ширина, цвет заливки, цвет обводки и острые или закруглённые углы.
Вот пример тега <rect> :
Элемент <use> позволяет клонировать и повторно использовать графические элементы SVG, в том числе такие элементы, как <g> , <rect> , а также другие <use> элементы.
Вот пример тега <use> :
Элемент <path> определяет путь, состоящий из координат точек для формирования фигуры. Код с использованием <path> может казаться магией, но не пугайтесь! В примере ниже код можно прочесть как:
- «M150 0» — переместись на (150,0);
- «L75 200» — нарисуй линию к (75,200) от предыдущей точки (которая имела координаты (150,0));
- «L255 200» — нарисуй линию к (225,200) от предыдущей точки (которая имела координаты (75,200));
- «Z» — закрой путь (нарисуй линию к начальной точке).
Вам, скорее всего, не потребуется учить этот код, так как он может быть сгенерирован любым SVG-редактором, но будет здорово, если вы будете его понимать.
Вот пример тега <path> :
<symbol>
И, наконец, элемент <symbol> определяет символы, которые могут быть использованы повторно. Эти символы отрисовываются только при помощи тега <use> .
Вот пример тега <symbol> :
Создаём SVG
Есть множество доступных SVG-редакторов, например, Adobe Illustrator или Inkscape. Последний бесплатен и с открытым исходным кодом. Поскольку SVG-файлы это XML-код, то в крайнем случае вы можете написать его вручную.
Для этого примера я буду использовать простой онлайн-редактор. В нём вы можете создавать SVG без необходимости устанавливать что-либо ещё.
- Для начала создадим круг.
- Затем добавим больше кругов и сохраним исходный код.
CSS3-анимация
SVG может быть анимирован с помощью добавления атрибута id или class SVG-тегам, и последующей стилизации их в CSS. Так же, как и любой другой документ. Ниже приведён пример того, как может быть анимирован SVG.
CSS-анимация предлагает множество типов анимации, которые вы можете выбрать. Линейная анимация — это ещё один крутой атрибут SVG.
Для следующего примера я написала текст «Hi, I am Surbhi», используя инструмент «Pen» в редакторе. Затем я использовала ключевые кадры из CSS3 для создания анимации.
Обратите внимание, что каждый тег path имеет уникальный идентификатор. Это связано с тем, что нам важна задержка при создании анимации для нескольких слов.
Анимационный тег <animate>
Внимание! Декларативная анимация в формате SMIL с помощью тегов <animate> не рекомендуется к использованию и, вероятно, будет удалена из браузеров в будущем (прим. редактора, 28 ноября 2019).
<animate> — это тег для создания анимации, встроенный в сам SVG. Он определяет, как атрибуты элементов изменяются от начальных до конечных значений в процессе указанной анимации. Это используется для анимации свойств, которые не могут быть анимированы с помощью CSS.
Основные элементы, которые анимируются этим тегом: цвет, движение и трансформация.
Тег <animate> вкладывается внутрь тега объекта, который должен быть анимирован. Он не работает для путей, состоящих из координат, а только внутри тегов, создающих объекты. Обратите внимание на атрибут additive . Он показывает, что анимации не переопределяют друг друга, а вместо этого работают одновременно.
Вот пример анимации SVG с помощью тега <animate> :
Анимация и интерактивность, основанная на JavaScript
Поскольку SVG — это просто документ с тегами, то мы можем использовать JavaScript для взаимодействия с отдельными элементами SVG, получая их при помощи селекторов ( id или class ).
Помимо стандартного JavaScript, есть множество JS-библиотек для анимации и взаимодействий с SVG: Vivus.js, Snap.svg, RaphaelJS и Velocity.js.
В следующем примере я использовала библиотеку Vivus.js вместе с jQuery, чтобы получить анимацию линий:
Почему нельзя использовать SVG для всех изображений?
SVG больше всего подходит для изображений, которые могут быть построены с помощью нескольких геометрических фигур и формул. Хотя, в принципе, вы можете конвертировать ваши фотографии в SVG, но размер изображения будет несколько мегабайт, что нарушит цель SVG — экономить место. SVG лучше использовать для иконок, логотипов и небольшой анимации.
От автора: SVG-изображения не так распространены, как наши любимые растровые форматы PNG и JPG, однако преимущества векторной графики привлекают все больше дизайнеров. Дизайнеры все чаще используют векторную графику в своих проектах. Раньше нам нужно было скачивать десктопные приложения типа Adobe Illustrator и Inkscape, но в 2017 проектировать векторную графику можно, не выходя из браузера. Если вы искали бесплатный SVG-редактор, то можете начать с этих шести бесплатный инструментов.
Vectr
Vectr – хороший выбор для новичков и продвинутых пользователей SVG. Интерфейс аккуратный и не переполнен множеством инструментов, которыми вы не будете пользоваться. Редактор хорошо подходит для новичков в векторной иллюстрации. Пользователь не должен теряться среди инструментов, которые непонятно для чего используются. В комплекте идет несколько уроков. Даже если вы полный ноль с SVG, у вас есть возможность быстро научиться.
Однако все вышеперечисленное не означает, что в Vectr скудный функционал. В нем есть весь базовый набор для создания обычного изображения: фигуры, текст, слои, тени, рамки, фоны и т.д. Ему не сравниться с полноценным десктопным редактором, но для быстрых дизайнов и правок этого более чем достаточно. Изображение можно создавать с нуля или загрузить существующее.
При загрузке сложных иллюстраций в Vectr могут возникать ошибки (карты или детальные диаграммы). Редактор не всегда хорошо обрабатывает сложную графику. Однако для более простого SVG (иконки, логотипы и т.д.) этого редактора будет достаточно.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Если в онлайн версии нет нужных вам функций, можно скачать десктоп версию приложения. Редактор доступен для Windows, Mac, Linux и Chromebook.
Возможно, самая крутая функция в Vectr – вы можете делать ссылки и вставлять изображения прямо с сайта Vectr, что делает его эффективным хостингом для SVG. Множество сервисов блокируют загрузку SVG файлов, поэтому это серьезный плюс. Вы можете показывать SVG изображения из Vectr на удаленных сайтах типа WP, Medium, Tumblr и т.д., которые блокируют прямую загрузку SVG, но разрешают ее показ по удаленке.
Vectr позволяет делиться векторной графикой в панели редактора, чтобы другие пользователи могли изменять созданную вами графику. То есть можно, например, сделать SVG-шаблон логотипа, который пользователи уже будут дорабатывать под себя. Все это в браузере.
С этой целью Vectr недавно выпустили версию редактора в виде плагина для WP .
RollApp
В отличие от других инструментов из списка, когда вы заходите на домашнюю страницу RollApp, перед вами не открывается редактор. RollApp – это пакет приложений, а SVG-редактор – лишь одно из приложений. Отличный инструмент, это браузерная версия Inkscape .
Для работы в RollApp нужен аккаунт. Можно зарегистрировать новый или войти с помощью Google, Facebook, Amazon. Очень удобно, я ненавижу создавать тысячи новых аккаунтов лишь для того, чтобы увидеть приложение.
После авторизации откроется следующая страница:
Inkscape во всей красе! Без сомнения, RollApp – самое богатое на функционал приложение из списка. Вы буквально используете Inkscape в браузере! Я не сравнивал все до мелочей, но на вид в этом приложении есть ВСЕ фукнции Incscape, такие как слои, объекты, текст, пути, фильтры, эффекты, расширения и т.д.
Большие файлы обрабатываются не так быстро, ведь действия выполняются на серверах приложения и через интернет. Вкратце – если нужно редактировать большие и сложные файлы, RollApp не будет идеальным вариантом, но для других задач, не входящими в базовый набор, этот редактор подходит лучше других.
BoxySVG
Если вы давно читаете SitePoint, вам должен быть знаком редактор BoxySVG , потому что за последние 12 месяцев мы уже рассказывали про него. Не буду делать детальный обзор, так как это уже сделано в этой статье .
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Что важно, со времен обзора от Alex в BoxySVG добавили инспектор кода, что делает его одним из самых актуальных SVG инструментов для веб-разработчиков.
Janvas
Пару лет назад Janvas был очень популярным SVG-редактором. К сожалению, последнее время данный редактор не разрабатывается, но даже так он до сих пор работает. Веб движется вперед, а Janvas стоит на месте, поэтому интерес к нему угас. Alex с сайта SitePoint работал с этим инструментом немного в 2013-14 (в том числе с платной версией) и даже отвечал на вопросы некоторое время на странице Google+. Janvas был довольно мощным инструментом.
Главная проблема Janvas – он немного устарел. Браузеры развиваются, а приложения, которые не следуют за браузерами, с каждым днем становятся все менее стабильными. В Janvas множество функций: фигуры, текст, инструменты рисования, пути, маски и слои. Однако пользователи на форумах говорят, что множество этих функций не приносят желаемого результата.
Есть хорошая новость – выйдет новая версия в виде Chrome-приложения. Надеемся, они пофиксят проблемы.
DrawSVG
Возможно, вы уже выбрали себе бесплатный онлайн SVG редактор. Если же нет, то идем дальше. DrawSVG – полностью совместимый SVG-редактор с множеством функций. Мне очень нравится, что у этого приложения дизайн реально заточен под веб и не похож на порт десктопного приложения под браузер. Меню расположено слева, по клику открывается меню второго уровня и т.д.
С помощью DrawSVG можно рисовать, изменять и рендерить объекты. Рисовать можно простые фигуры, есть кривые Безье, прямой и изогнутый текст, множество стилей обводок и заливок и т.д. Также SVG можно экспортировать в PNG.
SVG-edit
SVG-edit – дедушка онлайн редакторов векторной графики, появился в середине 2000-х. Серверного функционала нет, все работает в браузере. Сохранить свою работу без добавления своего собственного функционала нельзя.
Тем не менее, для редактора, чья жизнь началась с сильно ограниченной и незаметной программы для рисования векторной графики, функционал SVG-edit постоянно улучшался.
С помощью SVG-edit можно рисовать простые фигуры (линии, прямоугольники, круги, многоугольники, линии от руки и т.д.), использовать пути, слои, градиенты, можно просматривать и редактировать SVG-исходники, экспортировать в PNG, JPEG, BMP, WEBP и т.д.
Заключение
Помимо этих 6 SVG-редакторов есть и другие, но мало кто предлагает больший функционал, чем пятерка показанных выше.
Если вы хотите всерьез заняться SVG, а в этих инструментах нет нужного вам функционала, вы всегда можете скачать десктоп SVG-редактор типа Illustrator или Inkscape. Однако для легкости, быстроты и гибкости все вышеперечисленные редакторы предлагают полезный набор функций.
PS: также можно попробовать Figma . Это больше инструмент для создания UI, а не SVG-редактор. Тем не менее, он имеет отличный набор инструментов и генерирует хорошо оптимизированный код SVG.
Автор: Ada Ivanoff
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Давайте начнём наше погружение с простого примера. Посмотрите на код, представленный ниже:
Скопируйте код и вставьте его в файл demo1.svg. После чего откройте его в Firefox. Браузер отобразит вам следующее изображение (пользователи Firefox: нажмите сюда):
Процесс отображения включает следующее:
- Мы начинаем с корневого элемента svg :
- как известно из (X)HTML, декларацию doctype следует опустить, потому что DTD на основе валидации SVG приводит к бо́льшим проблемам, чем их решает
- до SVG 2, чтобы обозначить версию SVG для других типов валидации, всегда следует использовать атрибуты version и baseProfile . Но в SVG 2 оба эти атрибута version и baseProfile обрели статус не рекомендованных
- как диалект XML, SVG всегда правильно должен связывать пространства имён (в атрибуте xmlns). Смотри страницу Namespaces Crash Course для большей информации.
- Фон устанавливается красным при помощи рисования прямоугольника <rect/> , который покрывает всю область изображения
- Зелёный круг <circle/> с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещён на 150px вправо, и 100px вниз).
- Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зелёного круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.
Основные свойства файлов SVG
- Первая важная вещь, которую следует заметить - это порядок отображения элементов. Глобально действующее правило для файлов SVG - элементы, которые отрендерились позднее, отображаются поверх предыдущих элементов. Чем дальше вниз элемент (по коду / порядку рендеринга), тем более видимым он будет.
- Файлы SVG в вебе могут быть отображены прямо в браузере или внедрены в файлы HTML посредством нескольких методов:
- Если HTML является XHTML и выводится как тип приложение /xhtml+xml , SVG может быть прямо внедрён в источник XML.
- Если HTML является HTML5, и браузер совместим с HTML5, SVG может быть прямо внедрён тоже. Однако, возможны синтаксические изменения для соответствия с HTML5 спецификацией
- На файл SVG можно ссылаться с помощью элемента object :
- Аналогично может быть использован элемент iframe :
- Элемент img тоже может быть использован теоретически. Однако эта техника не работает в Firefox до версии 4.0.
- Наконец SVG может быть создан динамически с помощью JavaScript и введён в HTML DOM. Этот способ имеет преимущество тем, что могут быть реализованы замещающие технологии для браузеров, которые не могут воспроизводить SVG.
Типы SVG файлов
Файлы SVG бывают двух видов. Нормальные файлы SVG - это простые текстовые файлы, содержащие разметку SVG. Рекомендуется расширение ".svg" (все нижним регистром) к имени файла для этих файлов.
Благодаря потенциально массивному размеру, который файлы SVG могут иметь при использовании в некоторых приложениях (например, географические приложения), спецификация SVG также допускает gzip-архивированные файлы SVG. Рекомендуется расширение ".svgz" (все нижним регистром) к имени файла. К сожалению, очень проблематично получить gzip-архивированные файлы SVG для надёжной работы со всеми SVG совместимыми пользовательскими агентами при управлении с сервера Microsofts IIS, когда Firefox не может загрузить gzip-архивированный SVG с локального компьютера. Избегайте gzip-архивированного SVG, кроме случаев, когда вы публикуетесь на веб-сервере, в корректной работе которого вы уверены (смотри ниже).
Слово о Веб-серверах
Неверная конфигурация сервера является очень частой причиной в невозможности загрузить SVG, поэтому убедитесь, что вы проверили конфигурацию вашего сервера. Если ваш сервер не сконфигурирован для того, чтобы посылать правильные заголовки с файлами SVG, тогда Firefox будет вероятнее всего показывать разметку файлов как текст или кодированный мусор, или даже спрашивать программу просмотра выбрать приложение, чтобы открыть их.
Читайте также: