Чем открыть svg

? Расширение файла .svg часто дается неправильно!

По данным Поиск на нашем сайте эти опечатки были наиболее распространенными в прошлом году:

cvg, evg, qvg, sbg, scg, sdg, sfg, sg, sgv, sv, svb, svf, svh, svn, svr

Это возможно, что расширение имени файла указано неправильно?

Мы нашли следующие аналогичные расширений файлов в нашей базе данных:

.vg
VGuard H.264 Video

.sgv
Self-Guard Security Camera Video

.sv
SystemVerilog File

.sfg
Synfig Studio Compressed Project

.svn
Subversion Data File

.svt
Torchlight Saved Game

.qvg
QPainter Vector Graphic Data

.svv
StatView ViewSet File

.evg
Yamaha SFG-05 Event Data

.svb
Torchlight 2 Saved Game

Не удается открыть файл .svg?

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

Windows не удается открыть этот файл: пример.svg Чтобы открыть этот файл, Windows необходимо знать, какую программу вы хотите использовать для его открытия…

Если вы не знаете как настроить сопоставления файлов .svg, проверьте FAQ.

Можно ли изменить расширение файлов?

Изменение имени файла расширение файла не является хорошей идеей. Когда вы меняете расширение файла, вы изменить способ программы на вашем компьютере чтения файла. Проблема заключается в том, что изменение расширения файла не изменяет формат файла.

Если у вас есть полезная информация о расширение файла .svg, напишите нам!

Оцените нашу страницу SVG

Пожалуйста, помогите нам, оценив нашу страницу SVG в 5-звездочной рейтинговой системе ниже. (1 звезда плохая, 5 звезд отличная)

<< Расширение файла .svf

Расширение файла .svgb >>

viewBox

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

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

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

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

Это очень простое демо, вот пример посложнее от Sarah Drasner.

Интересно, что если у SVG нет размеров, но задан , изображение займёт собой всё доступное пространство:

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

5 последних уроков рубрики «HTML5»

В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
HTML5 — глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.
Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.
Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

SVG-теги

<svg>

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

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

<g>

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

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

<rect>

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

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

<use>

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

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

<path>

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

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

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

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

<symbol>

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

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

Знакомимся с диалоговым окном сохранения

SVG Profiles
По умолчанию используется SVG 1.1
Fonts Type / Convert to outlines — что означает «перевести в кривые», то, что нам и нужно, при этом селект Subsetting становится недоступным для изменения.Type / SVG — Нужен в случае, если в SVG встраивается текстType / Subsetting — Позволяет указать включаемый набор символов с целью дальнейшей возможности редактирования текста в режиме исходного кода и представления его графически при отображении SVG файла.
OptionsImage Location / Embed — при наличии растровых изображений позволит включить их в состав SVG файлаImage Location / Link — при наличии растровых изображений положит их рядом с файлом в той же папке, указав в SVG файле ссылку на них. Если в данном случае убрать изображение включаемое, то SVG файл перестанет корректно отображаться.Preserve Illustrator Capabilities — галочка, предполагающая последующую возможность редактирования файла в иллюстраторе
More options
Трогать для решения наших задач необязательно.
SVG Code
Замечательная кнопка, позволяющая просмотреть SVG файл в текстовом формате сразу.

При выбранном Image Location / Embed:

По структуре кода можно даже совершенно не профессиональным взглядом выявить вставки растровой графики.

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

Пример, с 666 строки идет растровая дичь, абсолютное зло в нашем случае:

При выбранном Image Location / Link:

В коде будет менее заметная вставка, например:

Поэтому желательно просматривать именно в режиме Image Location / Embed!

Описание расширения SVG

Популярность:

Раздел: Векторная графика

Разработчик: World Wide Wide Consortium

Расширение SVG (от англ. Scalable Vector Graphics) используется в основном для изображения в векторном формате и является открытым форматом. .SVG основан на языке разметки XML, и был разработан в качестве открытого стандарта Консорциумом Всемирной паутины (World Wide Wide Consortium). Формат SVG используется как для статической, так и для анимированной графике.

Некоторые из ключевых особенностей формата SVG являются:

• Поддерживает гиперссылки («XLinks»)
• Поддержка векторных фигур (например, линий, кривых и т.д.)
• Поддерживает растровые объекты
• Поддержка текста
• Поддержка манипуляций и комбинаций объектов, включая группировку, преобразования и сценариев на основе событий

Основываясь на XML (который является по существу текстовым форматом), изображения SVG хорошо сжимаются. Формат SVGZ – модицифированный формат SVG, который использует сжатие GZIP и таким образом решается проблема с большим размером SVG файла.

Есть несколько версий формата SVG, которые сейчас используются, (SVG 1.0, SVG 1.1 и SVG Tiny 1.2 на момент написания статьи). В частности, SVG Tiny (SVGT) и SVG Basic (SVGB) являются подмножествами полного стандарта SVG в основном предназначенные для использования на устройстве с ограниченными возможностями, такие как мобильные телефоны или КПК. Кроме того, следует отметить, что поддержка браузера для SVG оказалась неполной – в настоящее время в большом количестве браузеров, в том числе Internet Explorer, необходим дополнительный плагин (что многие пользователи не будут иметь) для отображения SVG изображения.

MIME тип: image/svg-xml, image/svg+xml, image/vnd.adobe.svg+xmlHEX код: 3C

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

SVG наследует все недостатки XML, такие как большой размер файла (впрочем, последний компенсируется существованием сжатого формата SVGZ, однако его использование на данный момент затруднено, так как SVGZ не имеет собственного mime-type).
Сложность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ в размере файла, но даже даёт проигрыш по отношению к растровому формату. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.

Сравнение SVG и canvas

▍Рут Джон

Вот

Возможность	SVG	Canvas
Векторная графика	+	—
Растровая графика	—	+
Доступ в DOM	+	—
Доступность	+	±
Вывод текста	+	+
Вывод градиентов и паттернов	+	+
Поддержка CSS-анимации	+	—
Поддержка CSS-фильтров	+	+
Поддержка SVG-фильтров	+	+
Поддержка вывода файлов изображений и видеофайлов	—	+
Экспорт содержимого элемента	—	+
Управление отдельными пикселями	—	+
Доступ из JavaScript	—	+
Производительность анимации	±	+
Поддержка вычислений, выполняемых за пределами главного потока	—	+

▍Сара Драснер

этого

DOM/Virtual DOM
Canvas
Преимущества
Отлично подходит для UI/UX-анимации.
Танцуйте, пиксели!
Отлично подходит для вывода SVG-изображений, независимых от разрешения.
Отлично подходит для вывода 3D-графики и для других подобных вариантов использования.
Легко отлаживать.
Удобно управлять множеством движущихся объектов.
Недостатки
Изображения создаются из множества отдельных объектов.
Сложнее обеспечить доступность содержимого.
В свете предыдущего минуса оказывается, что при анимации SVG-изображений нужно проявлять осторожность.
В стандартном виде canvas-изображения зависимы от разрешения.

Сложно организовать взаимодействие пользователя с отдельными элементами изображения.

▍Ширли Ву

этот

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

Структура документа SVG

Первая строка — стандартный XML-заголовок, объявление (англ. XML declaration), указывающее версию XML (version) (обычно «1.0») и кодировку символов (encoding):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

Во второй и третьей строках должен располагаться заголовок DOCTYPE, определяющий тип документа (англ. Document Type Definitions) DTD:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

К сожалению, в некоторых случаях при применении Mozilla Firefox со встроенным просмотрщиком SVG содержание объявления DOCTYPE может быть источником ошибок. Имеются рекомендации не использовать декларацию DOCTYPE в SVG версий 1.0. Вместо этого рекомендовано включать атрибут baseProfile в корневой элемент <svg> со значением «full».

Если по каким-то причинам декларация DOCTYPE в документе необходима, рекомендовано использовать пустую декларацию, как в примере.

<!DOCTYPE svg >

В четвёртой строке размещается корневой элемент документа с указанием пространства имён SVG.

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     width="100%" height="100%">

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

Завершается документ всегда закрытием корневого тега .

Примеры

Простой статичный SVG-документ с контуром квадрата размером 400 пикселей и тремя полупрозрачными кругами радиусом 104 пикселей, по центру квадрата, каждый круг смещается от центра квадрата примерно на полрадиуса.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version = "1.1"
     baseProfile="full"
     xmlns = "http://www.w3.org/2000/svg" 
     xmlns:xlink = "http://www.w3.org/1999/xlink"
     xmlns:ev = "http://www.w3.org/2001/xml-events"
     height = "400px"  width = "400px">
     <rect x="0" y="0" width="400" height="400" 
          fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/>
     <g fill-opacity="0.6" stroke="black" stroke-width="0.5px">
        <circle cx="200px" cy="200px" r="104px" fill="red"   transform="translate(  0,-52)" />
        <circle cx="200px" cy="200px" r="104px" fill="blue"  transform="translate( 60, 52)" />
        <circle cx="200px" cy="200px" r="104px" fill="green" transform="translate(-60, 52)" />
     </g>
</svg>

Примечание: Этот код выполняется одинаково в Mozilla Firefox 2.0.0.11 и в Internet Explorer 6.0.2900.2180 (SVG Document Adobe Systems Inc.)

Ещё один пример — прямоугольник с закруглёнными углами, заполняющий всю область отображения:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     width="100%" height="100%">
<rect fill="white" x="0" y="0" width="100%" height="100%" />
<rect fill="silver" x="0" y="0" width="100%" height="100%" rx="1em"/>
</svg>

Жёлтая звезда:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="198" height="188"
     viewBox="0 0 198 188"
     version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="even-odd">
        <polygon id="Star-1" stroke="#979797" stroke-width="3" fill="#F8E81C"
            points="99 154 40 185 51 119 4 73 69 64 99 3 128 64 194 73 147 119 158 185 ">
        </polygon>
    </g>
</svg>

Чертёж выполнен в САПР КОМПАС-График и экспортирован в SVG-формат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кросс-браузерность

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1.5	IE Полная поддержка 9	Opera Полная поддержка 8	Safari Полная поддержка 3	WebView Android Полная поддержка 3	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка 3	Samsung Internet Android Полная поддержка Да
Устаревшая	Chrome Полная поддержка Да	Edge Полная поддержка ≤79	Firefox ?	IE ?	Opera Полная поддержка Да	Safari ?	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Полная поддержка Да
Устаревшая	Chrome Нет поддержки Нет	Edge Нет поддержки Нет	Firefox ?	IE ?	Opera Нет поддержки Нет	Safari ?	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Нет поддержки Нет
Устаревшая	Chrome Нет поддержки Нет	Edge Нет поддержки Нет	Firefox ?	IE ?	Opera Нет поддержки Нет	Safari ?	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Нет поддержки Нет
	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1.5	IE Полная поддержка 9	Opera Полная поддержка 8	Safari Полная поддержка 3	WebView Android Полная поддержка 3	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка 3	Samsung Internet Android Полная поддержка Да
	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1.5	IE Полная поддержка 9	Opera Полная поддержка 8	Safari Полная поддержка 3	WebView Android Полная поддержка 3	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка 3	Samsung Internet Android Полная поддержка Да
Устаревшая	Chrome Полная поддержка Да	Edge Полная поддержка ≤79	Firefox ?	IE ?	Opera Полная поддержка Да	Safari ?	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Полная поддержка Да
	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1.5	IE Полная поддержка 9	Opera Полная поддержка 8	Safari Полная поддержка 3	WebView Android Полная поддержка 3	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка 3	Samsung Internet Android Полная поддержка Да
	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1.5	IE Полная поддержка 9	Opera Полная поддержка 8	Safari Полная поддержка 3	WebView Android Полная поддержка 3	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка 3	Samsung Internet Android Полная поддержка Да
	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1.5	IE Полная поддержка 9	Opera Полная поддержка 8	Safari Полная поддержка 3	WebView Android Полная поддержка 3	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка 3	Samsung Internet Android Полная поддержка Да
	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1.5	IE Полная поддержка 9	Opera Полная поддержка 8	Safari Полная поддержка 3	WebView Android Полная поддержка 3	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка 3	Samsung Internet Android Полная поддержка Да
УстаревшаяНестандартная	Chrome Полная поддержка Да	Edge Полная поддержка ≤79	Firefox ?	IE ?	Opera Полная поддержка Да	Safari ?	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Полная поддержка Да

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

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

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

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

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

Практичность

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

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

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

Что такое SVG файл?

Файл SVG — это графический файл, который использует двумерный векторный графический формат, созданный консорциумом World Wide Web (W3C). Он описывает изображения, используя текстовый формат, основанный на XML. Файлы SVG разрабатываются как стандартный формат для отображения векторной графики в Интернете.

Больше информации

Файл SVG открыт в CorelDRAW Graphics Suite X8

Формат SVG является открытым стандартом, разработанным в рамках W3C (World Wide Web Consortium) , при этом Adobe играет важную роль. Изображения SVG могут быть созданы и экспортированы из программ Adobe Creative Suite, таких как Illustrator и GoLive.

Формат SVG не поддерживается в основном Adobe Photoshop, Photoshop Elements и InDesign. Однако вы можете открывать файлы SVG в этих программах, используя подключаемый модуль SVG Kit для Adobe CS, который разработан Scand.

Более подробную информацию о формате SVG можно найти в Интернете по информации Adobe Scalable Vector Graphics стр.

Программы, которые открывают SVG файлы

Adobe Illustrator

ACD Systems Canvas

CorelDRAW

Corel PaintShop Pro

GIMP

Google Drive

ImageMagick

Adobe Flash

MeshLab

CADSoftTools ABViewer

Adobe InDesign

Adobe Flash Player

Inkscape

Scribus

Microsoft Visio

GIMP

Google Drive

ImageMagick

MeshLab

Adobe Flash Player

Inkscape

Scribus

vhf interservice Cenon

yWorks yEd Graph Editor

Merkaartor

FreeCAD

Synfig Studio

Seavus iMindQ

Adobe Illustrator

GIMP

Google Drive

ImageMagick

Adobe Flash

MeshLab

Adobe InDesign

Blackmagic Design Fusion for Mac

Adobe Flash Player

Inkscape

Scribus

vhf interservice Cenon

Seavus iMindQ

yWorks yEd Graph Editor

Merkaartor

Seavus iMindQ

Итог

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

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

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

Открываем файлы векторной графики svg

? Расширение файла .svg часто дается неправильно!

Это возможно, что расширение имени файла указано неправильно?

Не удается открыть файл .svg?

Можно ли изменить расширение файлов?

Оцените нашу страницу SVG

viewBox

5 последних уроков рубрики «HTML5»

Знакомство с фрэймворком Webix

SVG-теги

<svg>

<g>

<rect>

<use>

<path>

<symbol>

Знакомимся с диалоговым окном сохранения

Описание расширения SVG

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

Сравнение SVG и canvas

▍Рут Джон

▍Сара Драснер

▍Ширли Ву

Структура документа SVG

Примеры

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

Кросс-браузерность

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

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

Практичность

Что такое SVG файл?

Итог