Формат svg: Какой программой открыть файл svg. Графический формат SVG и где он применяется

{{l10n_strings.DRAG_TEXT_HELP}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

за и против / Хабр

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

Очень коротко: что такое SVG

SVG (Scalable Vector Graphics) — язык разметки векторной графики, созданный W3C, подмножество языка XML. Предназначен для описания векторной и смешанной (векторно-растровой) двухмерной графики, поддерживает анимацию и интерактивность. В 2001 году вышла версия 1.0, в 2011 —

, актуальная ныне. Поддержка браузерами

, но 

, пикселизация при увеличении в Opera Mini и Opera Mobile 12.1.

Плюсы и сложности применения SVG

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

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

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

Рассмотрим список плюсов SVG подробнее:

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

Для экранов с повышенной плотностью пикселей достаточно одного изображения. В случае с растровой графикой на данный момент (весна 2015 г.) нужно, минимум, три (!) версии картинки: 100% макетного размера, 200% и 300%. В случае использования SVG, достаточно одной версии — как и для любого векторного формата, пиксели, нужные для показа изображения, «возникают» непосредственно перед показом, исходя из необходимого пиксельного размера.

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

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

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

Свободно распространяемое ПО. Для работы с SVG не обязательно использовать Adobe Illustrator (как стандарт в мире векторной графики), достаточно свободно распространяемого Inkscape. Есть и ряд других инструментов.

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

Юрий Ветров, руководитель отдела проектирования и дизайна Mail. Ru

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

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

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

Что касается того, «почему не используют SVG», я могу говорить только за наш проект. У нас есть особенность: большая часть контента — это фотографии (постеры, кадры из фильма, превью ролика).

Интерфейс в мобильном приложении хотим перевести на вектор, потому что нарезать картинки в трёх разрешениях (х.png, @2x.png, @3x.png) и утомительно, и провоцирует на ошибки. Но, пока банально не дошли руки.

Артём Геллер, главный разработчик сайта Kremlin.ru

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

При этом, мы заменяем элементы в SVG на PNG, в том случае, если с этим форматом конкретная версия браузера не дружит.

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

Вот несколько примеров с векторной графикой: один, два, три.

Вместо заключения: как делать SVG

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

1. Лучше стараться обходиться как можно меньшим числом точек. Чем меньше точек, тем, как правило, проще редактировать файл и тем меньших он будет размеров. Если используются формы, нарисованные другими специалистами, имеет смысл их упростить — уменьшить количество как опорных, так и управляющих точек. В Adobe Illustrator наиболее оптимальные (с технической стороны) контуры получаются при рисовании инструментом «перо» при грамотном выборе типа точек. Наименее оптимальные, обычно, являются результатом преобразования нарисованных кистью линий в векторные участки, или бездумной трассировки.

   Изображение 1 (Получено от дизайнера) 83 Кб	Изображение 2 (оптимизировано количество точек) 28 Кб	Изображение 2 (оптимизирована разметка) 10 Кб

2. Следует использовать пиксельную сетку и стараться располагать контуры так, чтобы их края были ровно на границе пикселей или на 1/2 пикселя. Если планируется изменения размеров элементов (например, иконки), то нужно проверить, как изменённый размер ляжет на пиксельную сетку. При этом важно помнить о том, что экран — это среда с серьёзными ограничениями, на любом размере попасть в пиксели невозможно, однако для наиболее частых размеров — нужно постараться.

   Формы выровнены по пиксельной сетке (400%)	Формы не выровнены по пиксельной сетке (400%)

3. Стоит создавать и сохранять SVG в том виде, в котором планируется дальнейшее использование этих элементов в дизайне. Иногда встречается ситуация, при которой к PSD-макету приложены использованные SVG, но в самом макете использована векторная форма с какими-то добавлениями (текстовой слой, что-то дорисовано растром, наложен какой-либо эффект). Подобный подход может исключить возможность использовать векторную графику для такого элемента дизайна.
4. Нужно использовать как можно меньше фигур, группировать только необходимое. Следует удалять фигуры, которые не являются составными частями картинки или невидимы (прикрыты другими фигурами).
5. Все символы, текстуры и рисунки кистью лучше преобразовывать в обычные векторные участки, не применяя растровые эффекты (Adobe Illustrator) и режимы наложения.

Полезные ссылки

Экспорт в SVG или SVGZ—ArcGIS Pro

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

Для экспорта в файл SVG или SVGZ, убедитесь, что вид карты или компоновки активен. На вкладке Общий доступ щелкните Экспорт Карты или Экспорт Компоновки , в зависимости от активного вида, чтобы открыть панель Экспорт. Измените параметр Тип файла на SVG или SVGZ. Задайте имя и расположение для файла, а также любые другие свойства, затем нажмите кнопку Экспорт.

При экспорте файла SVG или SVGZ доступны следующие свойства:

Связанные разделы

Отзыв по этому разделу?

Чем открыть SVG

SVG (Scalable Vector Graphics) является файлом масштабированной векторной графики с очень широкими возможностями, написанным на языке разметки XML. Давайте выясним, с помощью каких программных решений можно просмотреть содержимое объектов с данным расширением.

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

Учитывая, что Scalable Vector Graphics — это графический формат, закономерно, что просмотр этих объектов поддерживают, в первую очередь, просмотрщики изображений и графические редакторы. Но, как ни странно, до сих пор редкие просмотрщики изображений справляются с задачей открытия SVG, опираясь только на свой встроенный функционал. Кроме того, объекты изучаемого формата можно посмотреть при помощи некоторых браузеров и ряда других программ.

Способ 1: Gimp

Прежде всего, рассмотрим, как просмотреть рисунки изучаемого формата в бесплатном графическом редакторе Gimp.

1. Активируйте Gimp. Щелкайте «Файл» и выбирайте «Открыть…». Либо же используйте Ctrl+O.
2. Запускается оболочка выбора изображения. Переместитесь туда, где расположен искомый элемент векторной графики. Произведя выделение, кликайте «Открыть».
3. Активируется окошко «Создать Scalable Vector Graphics». В нем предлагается изменить настройки размеров, масштабирования, разрешения и некоторые другие. Но можно оставить их и без изменения по умолчанию, просто нажав «OK».
4. После этого картинка будет отображена в интерфейсе графического редактора Gimp. Теперь можно производить с ним все те же манипуляции, что и с любым другим графическим материалом.

Способ 2: Adobe Illustrator

Следующей программой, умеющей отображать и изменять изображения указанного формата, является Adobe Illustrator.

1. Запустите Adobe Illustrator. Последовательно щелкайте по пунктам списка «Файл» и «Открыть». Для любителей работать с «горячими» клавишами предусмотрено сочетание Ctrl+O.
2. Вслед за тем, как запустится инструмент выбора объекта, перейдите с его помощью в область расположения элемента векторной графики и выделите его. Затем нажимайте «OK».
3. После этого с высокой долей вероятности можно сказать, что появится диалоговое окно, в котором будет говориться о том, что у документа нет встроенного RGB-профиля. С помощью переключения радиокнопки пользователь может назначить рабочее пространство или конкретный профиль. Но можно и не производить в данном окне никаких дополнительных действий, оставив переключатель в положении «Оставить без изменений». Жмите «OK».
4. Картинка отобразится и будет доступна для изменений.

Способ 3: XnView

Рассмотрение просмотрщиков изображений, работающих с изучаемым форматом, мы начнем с программы XnView.

1. Активируйте XnView. Щелкните «Файл» и «Открыть». Применимо и Ctrl+O.
2. В запустившейся оболочке выбора изображения перейдите в область нахождения SVG. Отметив элемент, жмите «Открыть».
3. После данной манипуляции изображение отобразится в новой вкладке программы. Но вам сразу же будет виден один явный недостаток. Поверх изображения будет красоваться надпись о необходимости приобрести платную версию плагина CAD Image DLL. Дело в том, что пробная версия данного плагина уже встроена в XnView. Именно благодаря ей программа может отображать содержимое SVG. Но избавиться от посторонних надписей можно только после замены триальной версии плагина на платную.

Скачать плагин CAD Image DLL

Существует и другая возможность просмотреть SVG в XnView. Она осуществляется с помощью встроенного обозревателя.

1. После запуска XnView, находясь во вкладке «Обозреватель», щелкайте по наименованию «Компьютер» в левой части окна.
2. Отображается список дисков. Выберите тот, где находится SVG.
3. После этого отобразится древо каталогов. По нему необходимо перейти в ту папку, где расположен элемент векторной графики. После выделения данной папки её содержимое отобразится в основной части. Выделите наименование объекта. Теперь в нижней части окна во вкладке «Предпросмотр» будет отображаться превью рисунка.
4. Для включения режима полноценного просмотра в отдельной вкладке кликните по названию картинки левой кнопкой мышки два раза.

Способ 4: IrfanView

Следующим просмотрщиком изображений, на примере которого мы рассмотрим просмотр изучаемого вида рисунков, является IrfanView. Для показа SVG в названной программе тоже требуется плагин CAD Image DLL, но в отличие от XnView, он изначально не установлен в указанном приложении.

1. Прежде всего, вам нужно будет скачать плагин, ссылка на который была дана при рассмотрении предыдущего просмотрщика изображений. Причем, следует заметить, что, если вы установите бесплатную версию, то при открытии файла поверх изображения будет проступать надпись с предложением приобрести полноценный вариант. Если же вы сразу приобретете платную версию, то никаких посторонних надписей не будет. После того, как архив с плагином будет скачан, с помощью любого файлового менеджера переместите из него файл CADImage.dll в папку «Plugins», которая расположена в директории размещения исполняемого файла IrfanView.
2. Теперь можете запускать IrfanView. Щелкните по наименованию «Файл» и выберите «Открыть». Также для вызова окна открытия вы можете воспользоваться кнопкой O на клавиатуре.

   Другой вариант вызова указанного окна предусматривает щелчок по пиктограмме в форме папки.

3. Активируется окошко выбора. Перейдите в нем в каталог размещения изображения Scalable Vector Graphics. Выделив его, нажимайте «Открыть».
4. Рисунок отобразится в программе IrfanView. Если вы приобрели полноценную версию плагина, то изображение будет отображаться без посторонних надписей. В обратном случае поверх него будет высвечиваться рекламное предложение.

Картинку в этой программе можете просмотреть методом перетягивания файла из «Проводника» в оболочку IrfanView.

Способ 5: OpenOffice Draw

Просматривать SVG умеет также приложение Draw из офисного пакета OpenOffice.

1. Активируйте стартовую оболочку OpenOffice. Щелкайте по кнопке «Открыть…».

   Также вы можете применять Ctrl+O или произвести последовательное нажатие по элементам меню «Файл» и «Открыть…».

2. Активируется оболочка открытия объекта. С её помощью перейдите туда, где находится SVG. Выделив его, нажимайте «Открыть».
3. Изображение отобразится в оболочке приложения OpenOffice Draw. Вы можете производить редактирование этого рисунка, но после его завершения результат придется сохранить с другим расширением, так как сохранение в SVG OpenOffice не поддерживает.

Также изображение можно просмотреть путем перетаскивания файла в стартовую оболочку OpenOffice.

Можно произвести запуск и через оболочку Draw.

1. После запуска Draw жмите «Файл» и далее «Открыть…». Можно применить и Ctrl+O.

   Применимо нажатие на пиктограмму, которая имеет форму папки.

2. Активируется оболочка открытия. Перебазируйтесь с её помощью туда, где расположен векторный элемент. Отметив его, нажимайте «Открыть».
3. Изображение отобразится в оболочке Draw.

Способ 6: LibreOffice Draw

Поддерживает отображение Scalable Vector Graphics и конкурент OpenOffice – офисный пакет LibreOffice, который в своем составе также имеет приложение для редактирования изображений под названием Draw.

1. Активируйте стартовую оболочку LibreOffice. Щелкните «Открыть файл» или набирайте Ctrl+O.

   Вы можете активировать окошко выбора объекта через меню, щелкнув «Файл» и «Открыть».

2. Активируется окошко выбора объекта. В нем следует перейти в ту файловую директорию, где находится SVG. После того, как названный объект отмечен, жмите «Открыть».
3. Картинка будет показана в оболочке LibreOffice Draw. Как и в предыдущей программе, в случае редактирования файла результат придется сохранять не в SVG, а в одном из тех форматов, сохранение в которых данное приложение поддерживает.

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

Также в LibreOffice, как и у предыдущего описанного нами пакета программ, можно просмотреть SVG и через оболочку Draw.

1. После активации Draw последовательно жмите по пунктам «Файл» и «Открыть…».

   Вы можете воспользоваться нажатием на пиктограмму, представленную папкой, или использовать Ctrl+O.

2. Это вызывает оболочку открытия объекта. Выберите SVG, выделите его и жмите «Открыть».
3. Картинка будет отображена в Draw.

Способ 7: Opera

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

1. Запустите Оперу. В этом веб-обозревателе нет визуализированных инструментов в графическом виде для активирования окна открытия. Поэтому для его активации следует использовать Ctrl+O.
2. Появится окно открытия. Тут необходимо перейти в директорию расположения SVG. Выделив объект, нажимайте «OK».
3. Картинка отобразится в оболочке браузера Opera.

Способ 8: Google Chrome

Следующим браузером, умеющим отображать SVG, является Google Chrome.

1. Данный веб-обозреватель, как и Opera, основан на движке Blink, поэтому имеет схожий способ запуска окна открытия. Активируйте Google Chrome и наберите Ctrl+O.
2. Активируется окошко выбора. Тут нужно отыскать целевое изображение, произвести его выделение и нажать на кнопку «Открыть».
3. Содержимое отобразится в оболочке Гугл Хром.

Способ 9: Vivaldi

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

1. Запустите Вивальди. В отличие от ранее описанных браузеров, в этом веб-обозревателе заложена возможность запуска страницы открытия файла через графические элементы управления. Для этого нажимайте на логотип браузера в левом верхнем уголке его оболочки. Кликайте по «Файл». Далее отмечайте «Открыть файл…». Впрочем, тут работает и вариант открытия горячими клавишами, для чего необходимо набрать Ctrl+O.
2. Появляется привычная оболочка выбора объекта. Переместитесь в ней в место нахождения Scalable Vector Graphics. Отметив названный объект, кликайте «Открыть».
3. Изображение отображено в оболочке Вивальди.

Способ 10: Mozilla Firefox

Определим, как отобразить SVG в ещё одном популярном браузере – Mozilla Firefox.

1. Запустите Файрфокс. Если вы желаете производить открытие локально размещенных объектов при помощи меню, то, прежде всего, следует включить его отображение, так как по умолчанию меню отключено. Щелкайте правой кнопкой мышки (ПКМ) по самой верхней панели оболочки браузера. В появившемся перечне выбирайте «Панель меню».
2. После отображения меню последовательно щелкайте «Файл» и «Открыть файл…». Впрочем, вы можете использовать и универсальное нажатие Ctrl+O.
3. Активируется окошко выбора. Произведите переход в нем туда, где расположено искомое изображение. Отметьте его и кликайте «Открыть».
4. Содержимое отобразится в браузере Мозилла.

Способ 11: Maxthon

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

1. Для того, чтобы узнать адрес искомого файла, перейдите в «Проводнике» в директорию, где он расположен. Зажмите клавишу Shift и щелкайте ПКМ по наименованию объекта. Из списка выберите «Копировать как путь».
2. Запустите браузер Maxthon, установите курсор в его адресную строку. Щелкайте ПКМ. Из списка выбирайте «Вставить».
3. После того, как путь вставлен, удалите кавычки в начале и в конце его названия. Для этого устанавливайте курсор непосредственно после кавычек и нажимайте кнопку Backspace на клавиатуре.
4. Затем выделите весь путь в адресной строке и нажимайте Enter. Изображение будет отображено в Maxthon.

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

Способ 12: Internet Explorer

Рассмотрим варианты просмотра SVG еще и на примере стандартного браузера для операционных систем линейки Виндовс по Windows 8.1 включительно — Internet Explorer.

1. Запустите Интернет Эксплорер. Щелкайте «Файл» и выбирайте «Открыть». Также можете воспользоваться Ctrl+O.
2. Запускается небольшое окошко – «Открытие». Для перехода к непосредственному инструменту выбора объекта нажимайте «Обзор…».
3. В запустившейся оболочке переместитесь туда, где помещен элемент векторной графики. Обозначьте его и жмите «Открыть».
4. Выполняется возвращение в предыдущее окошко, где в адресном поле уже размещен путь к выбранному объекту. Нажимайте «OK».
5. Изображение отобразится в браузере IE.

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

Помогла ли вам эта статья?

файлов SVG: как их создавать, редактировать и открывать

• Что такое файл SVG?
   
• История файла SVG
   
• Для чего используются файлы SVG?
   
• Плюсы и минусы файлов SVG
   
• Как открыть файл SVG
   
• Как создать и отредактировать файл SVG
   
• Файлы SVG: часто задаваемые вопросы

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

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

Вы можете легко определить файл SVG по его расширению .svg.

История файла SVG восходит к концу 1990-х годов, когда Консорциум World Wide Web (W3C) предложил разработчикам новый тип формата векторной графики.Было представлено шесть конкурирующих предложений, которые помогли определить, что в конечном итоге стало форматом SVG W3C.

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

Масштабируемая векторная графика прошла долгий путь за последние годы — но для чего на практике используются SVG?

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

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

Откройте для себя больше векторных файлов

Прежде чем сохранять изображения в этом формате, стоит изучить преимущества и недостатки SVG.

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

• Файлы SVG отлично подходят для веб-графики, такой как логотипы, иллюстрации и диаграммы. Но отсутствие у них пикселей затрудняет отображение высококачественных цифровых фотографий. Файлы JPEG, как правило, лучше подходят для детальных фотографий.
   
• Только современные браузеры могут поддерживать изображения SVG.Вы можете столкнуться с трудностями при использовании файлов SVG с Internet Explorer 8 и другими старыми браузерами.
   
• Код, содержащийся в изображениях SVG, может быть трудно понять, если вы плохо знакомы с этим форматом файла.

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

От Chrome и Edge до Safari и Firefox, все основные браузеры в наши дни позволяют открывать файлы SVG — независимо от того, используете ли вы Mac или Windows. Просто запустите браузер и нажмите «Файл» > «Открыть», чтобы выбрать файл, который вы хотите просмотреть.Затем он отобразится в вашем браузере.

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

При использовании Adobe Photoshop выполните следующие действия: 

1. После того, как вы собрали изображение в Photoshop, нажмите «Файл» > «Экспорт» > «Экспортировать как».
    
2. Щелкните раскрывающееся меню «Формат» в появившемся окне и выберите SVG.
    
3. Выберите Экспортировать все и сохраните файл.

Полезное примечание: поскольку Photoshop является редактором растровой графики, многие люди предпочитают создавать и редактировать файлы SVG в Adobe Illustrator, редакторе векторной графики.

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

Самый простой способ обнаружить файл SVG — проверить код расширения. Файл SVG указан как файл .svg. Вы также можете найти векторные изображения, такие как SVG, увеличив их до 200% или выше на экране вашего компьютера. Векторное изображение сохранит четкие линии и сплошные цвета, а не станет пиксельным или размытым.

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

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

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

Масштабируемая векторная графика (SVG) 2

Кандидат W3C Рекомендация

Эта версия:

https://www.w3.org/TR/2018/CR-SVG2-20181004/

Последняя версия:

https://www.w3.org/TR/SVG2/

Предыдущая версия:

https://www.w3.org/TR/2018/CR-SVG2-20180807/

Редакторский проект

https://svgwg.org/svg2-draft/

Одностраничная версия:

https://svgwg.org/svg2-draft/single-page.html

Репозиторий GitHub:

https://github.com/w3c/svgwg/

Публичные комментарии:

[email protected] (архив)

Редакторы:

Амелия Беллами-Ройдс, приглашенный эксперт [email protected]>

Богдан Бринза, Microsoft Co.

Крис Лилли, W3C

Дирк Шульце, Adobe Systems

Дэвид Стори, Microsoft Co.

Эрик Виллигерс, Google

Бывшие редакторы:

Никос Андроникос, Canon, Inc.

Россен Атанасов, Microsoft Co.

Тавмджонг Бах, приглашенный эксперт

Брайан Бертлз, Mozilla Japan

Сирил Конколато, Telecom ParisTech

Эрик Дальстрем, приглашенный эксперт

Кэмерон МакКормак, Mozilla Corporation

Дуг Шеперс, W3C

Ричард Швердтфегер, IBM

Сатору Такаги, Корпорация KDDI com>

Джонатан Ватт, Mozilla Corporation

Copyright © 2018 W3C ^® ( MIT , ERCIM , Кейо, Бейхан). Применяются правила ответственности W3C, использования товарных знаков и документов.

Аннотация

Эта спецификация определяет функции и синтаксис масштабируемого Векторная графика (SVG) версии 2. SVG — это язык, основанный на XML для описания двухмерная векторная и смешанная векторно-растровая графика.Содержимое SVG можно стилизовать, масштабируется до различных разрешений экрана и может просматриваться отдельно, смешивается с содержимым HTML или внедряется с использованием пространств имен XML в другие языки XML. SVG также поддерживает динамические изменения; скрипт можно использовать для создания интерактивных документов, а анимацию можно выполнять с помощью декларативных функций анимации или с помощью сценария.

Статус этого документа

В этом разделе описывается состояние этого документа на момент его публикации.Этот документ может быть заменен другими документами. Список текущих публикаций W3C и последнюю редакцию этого технического отчета можно найти в указателе технических отчетов W3C по адресу https://www.w3.org/TR/.

Этот документ является кандидатом в рекомендации SVG 2 от 4 октября 2018 г. . Эта версия SVG основан на втором издании SVG 1.1. за счет повышения удобства использования и точности языка. В приложении «Изменения» перечислены все изменений, которые были сделаны после SVG 1.1 второе издание.

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

Ожидается, что эта Рекомендация-кандидат будет преобразована в Предложенную рекомендацию не ранее 4 декабря 2018 года.

В настоящее время предварительный отчет о внедрении отсутствует.Рабочая группа SVG работает над набором тестов для SVG2 и планирует подготовить отчет о реализации на основе этих тестов.

Приветствуются комментарии к этой рекомендации-кандидату. Комментарии могут быть подняты как проблемы GitHub (предпочтительно) или, в качестве альтернативы, отправить [email protected], общедоступный список адресов электронной почты по вопросам, связанным с векторной графикой в ​​Интернете. Этот список заархивировано и отправители должны согласиться на то, чтобы их сообщение было публично заархивировано из их первая публикация. Для подписки отправьте письмо на www-svg-запрос@w3.организация с на слово подпишитесь в теме письма.

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

• красный фон указывает на раздел, который не изменился со времен SVG 1. 1 (и поэтому все еще требует пересмотра и возможного переписывания для SVG 2) или раздел, который является новым, но требует существенной доработки
• желтый фон указывает на раздел из SVG 1.1, который был рассмотрен и переписанный при необходимости, или новый раздел, полный и готовый для остальной части рабочей группы для рассмотрения
• белый фон указывает на раздел либо из SVG 1.1, либо новый для SVG 2, проверенный рабочей группой и готовый для более широкого обзора

Этот документ был подготовлен Рабочая группа W3C SVG как часть графическая активность в домен взаимодействия W3C. То цели рабочей группы W3C SVG обсуждаются в Устав SVG W3C.Рабочая группа W3C SVG поддерживает общедоступную веб-страницу, https://www.w3.org/Графика/SVG/, который содержит дополнительную справочную информацию. Авторы этот документ являются участниками рабочей группы SVG.

Этот документ был подготовлен группой, работающей в рамках патентной политики W3C. W3C ведет общедоступный список раскрытий информации о патентах. сделанные в связи с результатами деятельности группы; эта страница также включает инструкции по раскрытию патента. Лицо, имеющее фактическую информацию о патенте, который, по его мнению, содержит существенные пункты формулы изобретения, должно раскрыть информацию в соответствии с разделом 6 Патентной политики W3C.

Список текущих рекомендаций W3C и других технических документов можно найти по адресу https://www.w3.org/TR/. публикации W3C могут быть обновлены, заменены или устаревшими другими документами в любое время.

Этот документ регулируется технологическим документом W3C от 1 февраля 2018 года.

Все функции в этой спецификации зависят от реализации в браузерах. или авторские инструменты. Если функция не обязательно будет реализована, мы определяем эта функция как «под угрозой».Функции, находящиеся под угрозой, будут удалены из текущего спецификации и могут быть включены в будущие версии спецификации. Если функция, подверженная риску, особенно важна для авторов SVG, эти авторы рекомендуется давать обратную связь исполнителям относительно ее приоритета. То следующие функции находятся под угрозой и могут быть удалены в течение периода CR:

Содержание

1. 1. Введение
   1. 1.1. О SVG
   2. 1.2. Совместимость с другими стандартами
   3. 1.3. Нормативная терминология
2. 2. Критерии соответствия
   1. 2.1. Обзор
   2. 2.2. Режимы обработки
      1. 2.2.1. Характеристики
      2. 2.2.2. Динамический интерактивный режим
      3. 2.2.3. Анимационный режим
      4. 2.2.4. Безопасный анимированный режим
      5. 2.2.5. Статический режим
      6. 2.2.6. Безопасный статический режим
   3. 2.3. Режимы обработки документов подресурсов SVG
      1. 2.3.1. Примеры
   4. 2.4. Классы соответствия документа
      1. 2.4.1. Соответствующие поддеревья SVG DOM
      2. 2.4.2. Соответствующие фрагменты разметки SVG
      3. 2. 4.3. Соответствие XML-совместимым фрагментам разметки SVG
      4. 2.4.4. Соответствие XML-совместимым поддеревьям SVG DOM
      5. 2.4.5. Соответствие автономным файлам SVG
      6. 2.4.6. Обработка ошибок
   5. 2.5. Классы соответствия программного обеспечения
      1. 2.5.1. Соответствующие генераторы SVG
      2. 2.5.2. Соответствующие инструменты разработки SVG
      3. 2.5.3. Соответствующие серверы SVG
      4. 2.5.4. Соответствующие интерпретаторы SVG
      5. 2.5.5. Соответствующие средства просмотра SVG
         1. 2.5.5.1. Печать примечаний по внедрению
      6. 2.5.6. Соответствующее высококачественное средство просмотра SVG
3. 3. Модель рендеринга
   1. 3.1. Введение
   2. 3.2. Дерево визуализации
      1. 3.2.1. Определения
      2. 3.2.2. Визуализированные и не визуализированные элементы
      3. 3.2.3. Управление видимостью: эффект «отображения» и «видимости» свойства
      4. 3.2. 4. Повторно использованная графика
   3. 3.3. Маляр модели
   4. 3.4. Оформление заказа
      1. 3.4.1. Установка контекста стека в SVG
   5. 3.5. Как визуализируются элементы
   6. 3.6. Как отображаются группы
      1. 3.6.1. Непрозрачность объекта и группы: влияние свойства «непрозрачность»
   7. 3.7. Типы графических элементов
      1. 3.7.1. Рисование форм и текста
      2. 3.7.2. Покраска растровых изображений
   8. 3.8. Фильтрация окрашенных областей
   9. 3.9. Обрезка и маскирование
   10. 3.10. Родительский композитинг
   11. 3.11. Эффект «переполнения» property
4. 4. Основные типы данных и интерфейсы
   1. 4.1. Определения
   2. 4.2. Синтаксис атрибута
      1. 4.2.1. Точность вещественного числа
      2. 4.2.2. Значения фиксации, ограниченные определенным диапазоном
   3. 4.3. Обзор SVG DOM
      1. 4.3.1. Зависимости для поддержки SVG DOM
      2. 4. 3.2. Соглашения об именах
      3. 4.3.3. Элементы в SVG DOM
      4. 4.3.4. Отражение атрибутов контента в DOM
      5. 4.3.5. Синхронизация отраженных значений
      6. 4.3.6. Отражение пустого начального значения
      7. 4.3.7. Неверные значения
   4. 4.4. Интерфейсы DOM для элементов SVG
      1. 4.4.1. Интерфейс SVGElement
      2. 4.4.2. Интерфейс SVGGraphicsElement
      3. 4.4.3. Интерфейс SVGGeometryElement
   5. 4.5. Интерфейсы DOM для базовых типов данных
      1. 4.5.1. Интерфейс SVGNumber
      2. 4.5.2. Интерфейс SVGLength
      3. 4.5.3. Интерфейс SVGAgle
      4. 4.5.4. Список интерфейсов
      5. 4.5.5. Интерфейс SVGNumberList
      6. 4.5.6. Интерфейс SVGLengthList
      7. 4.5.7. Интерфейс SVGStringList
   6. 4.6. Интерфейсы DOM для отображения анимируемых атрибутов SVG
      1. 4.6.1. Интерфейс SVGAnimatedBoolean
      2. 4.6.2. Интерфейс SVGAnimatedEnumeration
      3. 4.6.3. Интерфейс SVGAnimatedInteger
      4. 4. 6.4. Интерфейс SVGAnimatedNumber
      5. 4.6.5. Интерфейс SVGAnimatedLength
      6. 4.6.6. Интерфейс SVGAnimatedAngle
      7. 4.6.7. Интерфейс SVGAnimatedString
      8. 4.6.8. Интерфейс SVGAnimatedRect
      9. 4.6.9. Интерфейс SVGAnimatedNumberList
      10. 4.6.10. Интерфейс SVGAnimatedLengthList
   7. 4.7. Другие интерфейсы DOM
      1. 4.7.1. Интерфейс SVGUnitTypes
      2. 4.7.2. Миксин SVGTests
      3. 4.7.3. Миксин SVGFitToViewBox
      4. 4.7.4. Миксин SVGZoomAndPan
      5. 4.7.5. Mixin SVGURIReference
5. 5. Структура документа
   1. 5.1. Определение фрагмента документа SVG: элемент «svg»
      1. 5.1.1. Обзор
      2. 5.1.2. Пространство имен
      3. 5.1.3. Определения
      4. 5.1.4. Элемент «svg»
   2. 5.2. Группировка: элемент «g»
      1. 5.2.1. Обзор
      2. 5.2.2. Элемент «g»
   3. 5.3. Неизвестные элементы
   4. 5.4. Определение содержимого для повторного использования и элемент «defs»
      1. 5. 4.1. Обзор
      2. 5.4.2. Элемент defs
   5. 5.5. Элемент «символ»
      1. 5.5.1. Атрибуты
      2. 5.5.2. Примечания к символам
   6. 5.6. Элемент «использовать»
      1. 5.6.1. Теневое дерево элементов использования
      2. 5.6.2. Разметка повторно используемой графики
      3. 5.6.3. Область действия стилей и наследование
      4. 5.6.4. Мультимедиа в использовании — теневые деревья элементов
      5. 5.6.5. Анимации в использовании элементов теней деревьев
      6. 5.6.6. Обработка событий в теневых деревьях использования элементов
   7. 5.7. Условная обработка
      1. 5.7.1. Обзор условной обработки
      2. 5.7.2. Определения
      3. 5.7.3. Элемент «переключатель»
      4. 5.7.4. Атрибут «requiredExtensions»
      5. 5.7.5. Атрибут systemLanguage
   8. 5.8. «описание» и элементы заголовка
      1. 5.8.1. Определение
   9. 5.9. Элемент «метаданные»
   10. 5.10. Элементы метаданных HTML
   11. 5. 11. Чужие пространства имен и частные данные
   12. 5.12. Общие атрибуты
       1. 5.12.1. Определения
       2. 5.12.2. Атрибуты, общие для всех элементов: «id»
       3. 5.12.3. Атрибуты «lang» и «xml:lang»
       4. 5.12.4. Атрибут «xml:space»
       5. 5.12.5. Атрибут tabindex
       6. 5.12.6. Атрибуты data-*
   13. 5.13. Атрибуты WAI-ARIA
       1. 5.13.1. Определения
       2. 5.13.2. Атрибут роли
       3. 5.13.3. Атрибуты состояния и свойства (все атрибуты aria)
       4. 5.13.4. Неявная и разрешенная семантика ARIA
   14. 5.14. Интерфейсы DOM
       1. 5.14.1. Расширения интерфейса документа
       2. 5.14.2. Интерфейс SVGSVGElement
       3. 5.14.3. Интерфейс SVGGElement
       4. 5.14.4. Интерфейс SVGUnknownElement
       5. 5.14.5. Интерфейс SVGDefsElement
       6. 5.14.6. Интерфейс SVGDescElement
       7. 5.14.7. Интерфейс SVGMetadataElement
       8. 5.14.8. Интерфейс SVGTitleElement
       9. 5.14.9. Интерфейс SVGSymbolElement
       10. 5. 14.10. Интерфейс SVGUseElement
       11. 5.14.11. Интерфейс SVGUseElementShadowRoot
       12. 5.14.12. Миксин SVGElementInstance
       13. 5.14.13. Интерфейс ShadowAnimation
       14. 5.14.14. Интерфейс SVGSwitchElement
       15. 5.14.15. Миксин GetSVGDocument
6. 6. Стилизация
   1. 6.1. Стилизация содержимого SVG с помощью CSS
   2. 6.2. Встроенные таблицы стилей: элемент «стиль»
   3. 6.3. Внешние таблицы стилей: действие HTML-элемента «ссылка»
   4. 6.4. Таблицы стилей в документах HTML
   5. 6.5. Индивидуальный стиль элемента: атрибуты class и style
   6. 6.6. Атрибуты представления
   7. 6.7. Требуемые свойства
   8. 6.8. Таблица стилей пользовательского агента
   9. 6.9. Необходимые функции CSS
   10. 6.10. Интерфейсы DOM
       1. 6.10.1. Интерфейс SVGStyleElement
7. 7.Свойства геометрии
   1. 7.1. Горизонтальная координата центра: Свойство «сх»
   2. 7.2. Вертикальная координата центра: ‘cy’ имущество
   3. 7.3. Радиус: свойство r
   4. 7.4. Горизонтальный радиус: «rx» недвижимость
   5. 7.5. Вертикальный радиус: «ry» имущество
   6. 7.6. Горизонтальная координата: свойство «x»
   7. 7.7. Вертикальная координата: «y» недвижимость
   8. 7.8. Проклеивающие свойства: влияние ‘ширина и высота’ свойства
8. 8.Системы координат, преобразования и единицы измерения
   1. 8.1. Введение
   2. 8.2. Вычисление эквивалентного преобразования области просмотра SVG
   3. 8.3. Начальный вьюпорт
   4. 8.4. Исходная система координат
   5. 8.5. Свойство «преобразование»
   6. 8.6. Атрибут viewBox
   7. 8.7. «Сохранить соотношение сторон» атрибут
   8. 8.8. Создание нового окна просмотра SVG
   9. 8.9. Единицы
   10. 8.10. Ограничительные рамки
   11. 8.11.Единицы ограничивающей рамки объекта
   12. 8.12. Внутренние свойства размера содержимого SVG
   13. 8. 13. Векторные эффекты
       1. 8.13.1. Вычисление векторных эффектов
       2. 8.13.2. Вычисление векторных эффектов для систем координат вложенных окон просмотра
       3. 8.13.3. Примеры векторных эффектов
   14. 8.14. Интерфейсы DOM
       1. 8.14.1. Интерфейс SVGTransform
       2. 8.14.2. Интерфейс SVGTransformList
       3. 8.14.3. Интерфейс SVGAnimatedTransformList
       4. 8.14.4. Интерфейс SVGPreserveAspectRatio
       5. 8.14.5. Интерфейс SVGAnimatedPreserveAspectRatio
9. 9. Пути
   1. 9.1. Введение
   2. 9.2. Элемент «путь»
   3. 9.3. Данные пути
      1. 9.3.1. Общая информация о данных пути
      2. 9.3.2. Указание данных пути: свойство «d»
      3. 9.3.3. Команды «moveto»
      4. 9.3.4. Команда «closepath»
         1. 9.3.4.1. Завершающая сегмент операция закрытия пути
      5. 9.3.5. Команды «lineto»
      6. 9.3.6. Команды кубической кривой Безье
      7. 9. 3.7. Квадратичная кривая Безье команды
      8. 9.3.8. Команды эллиптической дуги
      9. 9.3.9. Грамматика для данных пути
   4. 9.4. Направленность пути
   5. 9.5. Замечания по внедрению
      1. 9.5.1. Параметры эллиптической дуги вне диапазона
      2. 9.5.2. Отраженные контрольные точки
      3. 9.5.3. Сегменты пути нулевой длины
      4. 9.5.4. Обработка ошибок в данных пути
   6. 9.6. Расстояние по пути
      1. 9.6.1. Атрибут pathLength
   7. 9.7. Интерфейсы DOM
      1. 9.7.1. Интерфейс SVGPathElement
10. 10. Базовые формы
    1. 10.1. Введение и определения
    2. 10.2. Прямоугольный элемент
    3. 10.3. Элемент «круг»
    4. 10.4. Элемент «эллипс»
    5. 10.5. Элемент «линия»
    6. 10.6. Элемент «полилиния»
    7. 10.7. Элемент «многоугольник»
    8. 10.8. Интерфейсы DOM
       1. 10.8.1. Интерфейс SVGRectElement
       2. 10.8.2. Интерфейс SVGCircleElement
       3. 10. 8.3. Интерфейс SVGEllipseElement
       4. 10.8.4. Интерфейс SVGLineElement
       5. 10.8.5. Миксин SVGAnimatedPoints
       6. 10.8.6. Интерфейс SVGPointList
       7. 10.8.7. Интерфейс SVGPolylineElement
       8. 10.8.8. Интерфейс SVGPolygonElement
11. 11.Текст
    1. 11.1. Введение
       1. 11.1.1. Определения
       2. 11.1.2. Шрифты и глифы
       3. 11.1.3. Метрики и расположение глифов
    2. 11.2. «текст» и элементы «tspan»
       1. 11.2.1. Атрибуты
       2. 11.2.2. Примечания по ‘x’, ‘y’, ‘dx’, ‘dy’ и ‘повороту’
    3. 11.3. Макет текста – Введение
    4. 11.4. Макет текста – Область содержимого
       1. 11.4.1. Свойство inline-size
       2. 11.4.2. Свойство «форма внутри»
       3. 11.4.3. Свойство «вычитание формы»
       4. 11.4.4. Свойство «форма-образ-порог»
       5. 11.4.5. Свойство «поле формы»
       6. 11.4.6. Свойство shape-padding
    5. 11.5. Макет текста – Алгоритм
    6. 11. 6. Предварительно отформатированный текст
       1. 11.6.1. Многострочный текст через пробел
       2. 11.6.2. Изменение положения глифов
    7. 11.7. Автоперенос текста
       1. 11.7.1. Примечания по переносу текста
          1. 11.7.1.1.Позиционирование первой линии
          2. 11.7.1.2. Пунктирные линии
    8. 11.8. Текст на пути
       1. 11.8.1. Элемент textPath
       2. 11.8.2. Атрибуты
       3. 11.8.3. Правила расположения текста на дорожке
    9. 11.9. Порядок отрисовки текста
    10. 11.10. Свойства и псевдоэлементы
        1. 11.10.1. Свойства SVG
           1. 11.10.1.1. Выравнивание текста, свойство text-anchor
           2. 11.10.1.2. Свойство «ориентация глифов по горизонтали»
           3. 11.10.1.3. Свойство «ориентация глифов по вертикали»
           4. 11.10.1.4. Свойство «кернинг»
        2. 11.10.2. Адаптация SVG
           1. 11.10.2.1. Свойство «вариант шрифта»
           2. 11.10.2.2. Свойство line-height
           3. 11. 10.2.3. Свойство «режим записи»
           4. 11.10.2.4. Свойство «направление»
           5. 11.10.2.5. Свойство «доминантная базовая линия»
           6. 11.10.2.6. Свойство «базовая линия выравнивания»
           7. 11.10.2.7. Свойство «сдвиг базовой линии»
           8. 11.10.2.8. Свойство «буквенный интервал»
           9. 11.10.2.9. Свойство «интервал между словами»
           10. 11.10.2.10. Свойство text-overflow
        3. 11.10.3. Пустое пространство
           1. 11.10.3.1. SVG 2 Предпочтительная обработка пробелов, свойство «белое пространство»
           2. 11.10.3.2. Устаревшая обработка пробелов, свойство xml:space
           3. 11.10.3.3. Дублирование директив пробелов
    11. 11.11. Текстовое оформление
        1. 11.11.1.Текстовое оформление-заливка и свойства text-decoration-stroke
    12. 11.12. Выбор текста и операции с буфером обмена
        1. 11.12.1. Примечания к реализации выделения текста
    13. 11.13. Интерфейсы DOM
        1. 11. 13.1. Интерфейс SVGTextContentElement
        2. 11.13.2. Интерфейс SVGTextPositioningElement
        3. 11.13.3. Интерфейс SVGTextElement
        4. 11.13.4. Интерфейс SVGTSpanElement
        5. 11.13.5. Интерфейс SVGTextPathElement
12. 12.Встроенный контент
    1. 12.1. Обзор
    2. 12.2. Размещение встроенного контента
    3. 12.3. Элемент «изображение»
    4. 12.4. HTML-элементы в поддеревьях SVG
    5. 12.5. Элемент «чужой объект»
    6. 12.6. Интерфейсы DOM
       1. 12.6.1. Интерфейс SVGImageElement
       2. 12.6.2. Интерфейс SVGForeignObjectElement
13. 13. Рисование: символы заливки, обводки и маркера
    1. 13.1. Введение
       1. 13.1.1. Определения
    2. 13.2. Спецификация краски
    3. 13.3. Влияние свойства «цвет»
    4. 13.4. Свойства заливки
       1. 13.4.1. Указание заливки: свойство «заливка»
       2. 13.4.2. Правило намотки: «правило заполнения» имущество
       3. 13. 4.3. Непрозрачность заливки: ‘fill-opacity’ недвижимость
    5. 13.5. Характеристики хода
       1. 13.5.1. Указание краски обводки: «обводка» имущество
       2. 13.5.2. Непрозрачность обводки: «непрозрачность обводки» собственность
       3. 13.5.3. Ширина обводки: «ширина обводки» имущество
       4. 13.5.4. Рисование заглавных букв на концах штрихов: «stroke-linecap» имущество
       5. 13.5.5. Управление соединениями линий: «stroke-linejoin» и свойства «Stroke-miterlimit»
       6. 13.5.6. Резкие штрихи: «мазок-дашаррай» и свойства «смещение штриха-тире»
       7. 13.5.7. Расчет формы штриха
       8. 13.5.8. Вычисление окружностей для дуг ‘обводка линии’
       9. 13.5.9. Настройка кругов для дуг ‘stroke-linejoin’, когда исходные окружности не пересекаются
    6. 13.6. Векторные эффекты
    7. 13.7. Маркеры
       1. 13.7.1. Элемент «маркер»
       2. 13.7.2. Маркеры вершин: «старт маркера», «маркер-середина» и «маркер-конец» свойства
       3. 13. 7.3. Маркерное сокращение: «маркер» имущество
       4. 13.7.4. Отрисовка маркеров
    8. 13.8. Управление порядком операций покраски: свойство «заказ на покраску»
    9. 13.9. Цветовое пространство для интерполяции: свойство «интерполяция цвета»
    10. 13.10. Подсказки по рендерингу
        1. 13.10.1. Свойство «цветопередача»
        2. 13.10.2. Свойство «придавать форму»
        3. 13.10.3. Свойство text-rendering
        4. 13.10.4. Свойство «рендеринг изображения»
    11. 13.11. Эффект «изменяемое» имущество
    12. 13.12. Интерфейсы DOM
        1. 13.12.1. Интерфейс SVGMarkerElement
14. 14. Серверы рисования: градиенты и узоры
    1. 14.1. Введение
       1. 14.1.1. Использование серверов рисования в качестве шаблонов
    2. 14.2. Градиенты
       1. 14.2.1. Определения
       2. 14.2.2. Линейные градиенты
          1. 14.2.2.1. Атрибуты
          2. 14.2.2.2. Примечания к линейным градиентам
       3. 14. 2.3. Радиальные уклоны
          1. 14.2.3.1. Атрибуты
          2. 14.2.3.2. Примечания по радиальным уклонам
       4. 14.2.4. Ограничители градиента
          1. 14.2.4.1. Атрибуты
          2. 14.2.4.2. Свойства
          3. 14.2.4.3. Примечания к ограничителям уклона
    3. 14.3. Шаблоны
       1. 14.3.1. Атрибуты
       2. 14.3.2. Примечания к шаблонам
    4. 14.4. Интерфейсы DOM
       1. 14.4.1. Интерфейс SVGGradientElement
       2. 14.4.2. Интерфейс SVGLinearGradientElement
       3. 14.4.3. Интерфейс SVGRadialGradientElement
       4. 14.4.4. Интерфейс SVGStopElement
       5. 14.4.5. Интерфейс SVGPatternElement
15. 15. Сценарии и интерактивность
    1. 15.1. Введение
    2. 15.2. Поддерживаемые события
       1. 15.2.1. Связь с событиями пользовательского интерфейса
    3. 15.3. События пользовательского интерфейса
    4. 15.4. События указателя
    5. 15.5. Порядок проверки и обработки событий пользовательского интерфейса
       1. 15. 5.1. Проверка на попадание
       2. 15.5.2. Обработка событий
    6. 15.6. Свойство «указатель-события»
    7. 15.7. Увеличение и панорамирование
    8. 15.8. Фокус
    9. 15.9. Атрибуты событий
       1. 15.9.1. Атрибуты событий анимации
    10. 15.10. Элемент «сценарий»
    11. 15.11. Интерфейсы DOM
        1. 15.11.1. Интерфейс SVGScriptElement
16. 16. Связывание
    1. 16.1. Каталожные номера
       1. 16.1.1. Обзор
       2. 16.1.2. Определения
       3. 16.1.3. URL-адреса и URI
       4. 16.1.4. Синтаксические формы: URL и
       5. 16.1.5. Атрибуты ссылок URL
       6. 16.1.6. Устаревшие атрибуты ссылок XLink URL
       7. 16.1.7. Обработка ссылок URL
          1. 16.1.7.1. Создание абсолютного URL-адреса
          2. 16.1.7.2. Получение документа
          3. 16.1.7.3. Обработка документа подресурса
          4. 16.1.7.4. Идентификация целевого элемента
          5. 16.1.7.5. Действительные цели URL
    2. 16. 2. Ссылки вне содержимого SVG: элемент «a»
    3. 16.3. Связывание с содержимым SVG: фрагменты URL и представления SVG
       1. 16.3.1. Идентификаторы фрагментов SVG
       2. 16.3.2. Определения идентификаторов фрагментов SVG
       3. 16.3.3. Предопределенные виды: элемент «вид»
    4. 16.4. Интерфейсы DOM
       1. 16.4.1. Интерфейс SVGAElement
       2. 16.4.2. Интерфейс SVGViewElement
17. Приложение A: Определения IDL
18. Приложение B: Замечания по реализации
    1. B.1. Введение
    2. B.2. Преобразование параметров эллиптической дуги
       1. B.2.1. Синтаксис конечной точки эллиптической дуги
       2. B.2.2. Варианты параметризации
       3. B.2.3. Преобразование из центральной в параметризацию конечной точки
       4. B.2.4. Преобразование конечной точки в центральную параметризацию
       5. B.2.5. Коррекция выходящих за пределы диапазона радиусов
    3. B.3. Примечания по созданию высокоточной геометрии
19. Приложение C: Поддержка специальных возможностей
    1. C. 1. Специальные возможности SVG
    2. C.2. Спецификации и рекомендации по поддержке специальных возможностей SVG
20. Приложение D: Анимация документов SVG
21. Приложение E: Ссылки
    1. E.1. Нормативные ссылки
    2. E.2. Информативные ссылки
22. Приложение F: Указатель элементов
23. Приложение G: Указатель атрибутов
    1. G.1. Обычные атрибуты
    2. G.2. Атрибуты представления
24. Приложение H: Индекс свойств
25. Приложение I: Индекс IDL
26. Приложение J: Регистрация типа носителя для изображения/svg+xml
    1. J.1. Введение
    2. Дж.2. Регистрация медиа типа image/svg+xml
27. Приложение K: Отличия от SVG 1.1
    1. К.1. Редакционные изменения
    2. K.2. Существенные изменения
       1. K.2.1. По всему документу
       2. K.2.2. Глава «Концепции» (только SVG 1.1)
       3. K.2.3. Глава Критерии соответствия (Приложение в SVG 1.1)
       4. K. 2.4. Глава «Визуализация модели»
       5. K.2.5. Основные типы данных и интерфейсы глава
       6. K.2.6. Глава структуры документа
       7. K.2.7. Глава оформления
       8. K.2.8. Глава «Свойства геометрии» (только SVG 2)
       9. K.2.9. Системы координат, преобразования и единицы, глава
       10. K.2.10. Глава
       11. K.2.11. Основные формы, глава
       12. K.2.12. Глава текста
       13. K.2.13. Глава «Встроенное содержимое» (только SVG 2)
       14. K.2.14. Раздел покраски
       15. K.2.15. Цветная глава (только SVG 1.1)
       16. K.2.16. Глава «Серверы рисования» (называется «Градиенты и узоры» в SVG 1.1)
       17. K.2.17. Глава «Отсечение, маскирование и компоновка» (только SVG 1.1)
       18. K.2.18.Глава Эффекты фильтра (только SVG 1.1)
       19. K.2.19. Глава «Сценарии и интерактивность» (отдельные главы в SVG 1.1)
       20. K.2.20. Связывание главы
       21. K.2.21. Глава о сценариях (в SVG 1.1)
       22. K.2.22. Глава анимации (только SVG 1.1)
       23. K. 2.23. Глава Шрифты (только SVG 1.1)
       24. K.2.24. Глава метаданных (только SVG 1.1)
       25. K.2.25. Глава «Обратная совместимость» (только SVG 1.1)
       26. K.2.26. Глава о расширяемости (только SVG 1.1)
       27. K.2.27. Приложение к определению типа документа (только SVG 1.1)
       28. K.2.28. Объектная модель документа SVG (DOM) (только SVG 1.1)
       29. K.2.29. Приложение IDL Определения
       30. K.2.30. Приложение привязки к языку Java (только SVG 1.1)
       31. K.2.31. Приложение ECMAScript Language Binding (только SVG 1.1)
       32. K.2.32. Приложение «Примечания к реализации» (было «Требования к реализации» в SVG 1.1)
       33. K.2.33. Приложение поддержки специальных возможностей
       34. K.2.34. Приложение «Поддержка интернационализации» (SVG 1.только 1)
       35. K.2.35. Приложение «Минимизация размеров файлов SVG» (только SVG 1.1)
       36. K.2.36. Приложение «Анимация документов SVG» (только SVG 2)
       37. K.2.37. Справочное приложение
       38. K. 2.38. Приложения указателя элементов, атрибутов и свойств
       39. K.2.39. Приложение IDL Index (только SVG 2)
       40. K.2.40. Строки функций (только SVG 1.1)

Благодарности

Рабочая группа SVG благодарит следующих людей за внося свой вклад в эту спецификацию с помощью исправлений или участвуя в обсуждениях что привело к изменениям в документе: Дэвид Дэйли, Эрик Иствуд, Ярек Фокса, Дэниел Холберт, Пол ЛеБо, Роберт Лонгсон, Генри Мэнсон, мс2гер, Кари Пихкала, Филип Роджерс, Давид Збарский.

Кроме того, рабочая группа SVG хотела бы отметить вклад редакторов и авторов предыдущих версий SVG — большая часть текста в этом документе получена из этих более ранние спецификации – в том числе:

• Патрик Денглер, Microsoft Corporation (версия 1.1, второе издание)
• Джон Феррайоло, бывший Adobe Systems (версии 1.0 и 1.1, первое издание; до 10 мая 2006 г.)
• Энтони Грассо, бывший Canon Inc. (версия 1. 1, второе издание)
• Дин Джексон, бывший W3C (версия 1.1 первое издание; до февраля 2007 г.)
• 藤沢 淳 (FUJISAWA Jun), Canon Inc. (версия 1.1, первое издание)

Наконец, рабочая группа SVG хотела бы отметить очень много людей, не входящих в рабочую группу SVG, которые помогают с процесс разработки спецификаций SVG. Эти люди слишком многочисленные, чтобы перечислить индивидуально. Они включают, но не ограничиваются ранние разработчики языков SVG 1.0 и 1.1 (включая средства просмотра, средства разработки и транскодеры на стороне сервера), разработчики SVG-контент, люди, которые внесли свой вклад в www-svg@w3.организация и [email protected] списки адресов электронной почты, другие рабочие группы на W3C и команда W3C. SVG 1.1 — это действительно совместная работа рабочая группа SVG, остальная часть W3C, а также общественность и преимущества во многом благодаря новаторской работе первых разработчиков и содержанию разработчиков, отзывы общественности и помощь команды W3C.

Семейство форматов файлов масштабируемой векторной графики (SVG)

Экспорт графиков статистики в формате SVG

.  sysuse uslifeexp2, очистить 
.  двустороннее соединение ле года 
.  экспорт графика uslifeexp.svg 
 

.  экспорт графика uslifeexp.svg 
(файл uslifeexp.svg записан в формате SVG)