Файл svg что это

Обновлено: 07.07.2024

Вы можете считать Масштабируемую Векторную Графику (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 лучше использовать для иконок, логотипов и небольшой анимации.

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

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

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

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

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

Лучшие редакторы для работы с файлами SVG

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

Adobe Illustrator

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

Boxy SVG

Открыть SVG-картинки также можно с помощью специально созданного для работы с этим форматом приложения Boxy SVG. Данный редактор во многом уступает Adobe Illustrator, однако в нём вы найдете все базовые инструменты для создания и редактирования изображений SVG. Приложением поддерживаются работа с фигурами и объектами, импорт шрифтов и картинок популярных форматов, работа с библиотекой Pixabay, просмотр и редактирование исходного кода SVG и CSS. Программа Boxy SVG доступна как онлайн-сервис и как приложение для Windows 10, MacOS и Chrome OS.

Vectr

Чем открыть файл SVG еще? Для работы с файлами этого типа есть программа Vectr, очень даже неплохо справляющаяся с возложенными на неё задачами редактирования. В приложении доступны такие функции, как изменение отдельных частей векторного изображения, работа со слоями, добавление текста и примитивов, применение эффектов (например, прозрачность, обводка, внешняя и внутренняя тень), использование градиентов, пера, линий и других инструментов. Утилита Vectr бесплатна, есть версии для Windows, Linux и Chrome OS.

Inkscape

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

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

Чем открыть SVG онлайн

Если же вы ищите что-то попроще, попробуйте онлайновый векторный редактор Sketchpad, доступный по адресу sketch.io/sketchpad. В активе Sketchpad имеются такие инструменты, как кисти, линии, стрелки, примитивы, клипарт, перо, мелок, аэрограф, заливка и т.п. Есть работа со слоями, палитрой и градиентами.

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

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

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

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

Форматов для изображений существует очень много, но все они делятся на два больших класса – растровые и векторные. Первые в основном используются для различной сложной и детальной графики, например, фотографии. В них каждый пиксель – мельчайший элемент – может иметь собственный цвет, и в файле, в общем, просто сохраняются цвета для каждой точки изображения. Конечно, используются разные методы, чтобы сжать размер информации, и от этого происходит много растровых форматов – BMP, PNG, IPG и прочие. Обычно наилучшую эффективность показывает IPG, так как получается небольшой файл при достаточно хорошей детализации. Но у него есть недостаток – потеря информации при сжатии. Поэтому, если уменьшать размер файла, происходит ухудшение изображения.

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

Общее описание расширения

Тип файла SVG – сокращение от Scalable Vector Graphics, то есть масштабируемая векторная графика. Для описания изображения используются языки разметки VML и PGML. По сути, это текстовый документ, в котором для каждой фигуры описаны координаты вершин и линий, проходящих через них, а также цвета разных элементов. Первая версия этого формата вышла в 2001 году, и сейчас активно разрабатывается вторая версия. То есть он является перспективным и развивается. Одно из достоинств – малый размер файла, в котором могут быть сохранены довольно сложные рисунки. Поэтому сейчас всё больше иконок, пиктограмм, логотипов и других элементов сайтов используется именно в этом формате, а не в растровых. Это ускоряет загрузку сайта. К уникальным возможностям формата SVG относятся интерактивность и анимация. Первая позволяет картинке реагировать на действия пользователя, например, на клик мышкой или перемещение каких-то элементов. Анимация позволяет создавать довольно сложные сценарии. Всё вместе позволяет создавать очень красивые и живые графические элементы для сайтов. Их даже можно встраивать в обычные растровые изображения в форматах PNG, IPG и прочих.

Чем открыть файл SVG

В Интернете можно найти множество таких картинок на фотостоках, в том числе бесплатных. Создаются они в графических редакторах Adobe Photoshop, Illustrator, Corel Draw и некоторых других. Но возникает вопрос – чем открыть формат SVG. Ведь встроенные средства Windows не показывают, какие картинки в них содержатся. Хотя редактировать SVG можно даже в текстовом редакторе, например, в Блокноте, ведь это текстовый документ, но для этого нужно иметь немалые знания в языках разметки. Открыть файл SVG можно либо в программе, в которой он создавался, либо в каком-нибудь другом графическом редакторе, поддерживающем этот формат.

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

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

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

Для удобства они были разделены на несколько категорий.

Для ОС Windows и Mac OS

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

Самой актуальной выступает ОС Windows 10, но многие юзеры продолжают пользоваться Windows 8, Windows 7 и более старыми версиями операционки.

Если и у вас установлена одна из ОС серии Windows, для работы с файлами формата SVG можно воспользоваться следующими программами:

Для ОС Linux

Операционная система Linux по уровню своего распространения уступает лидерам в лице Windows и Mac OS.

Но ОС всё равно является востребованной, в результате чего разработчики программного обеспечения считают необходимым выпускать ПО для этой платформы.

Что же касается файлов формата SVG, то здесь их можно открыть с помощью таких рассмотренных уже инструментов как Inkscape, а также GIMP.

Но ещё пользователям Linux доступна такая интересная программная разработка как KolourPaint.

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

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

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

Онлайн сервисы

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

К их числу относятся такие онлайн инструменты:

Google Диск. Не все знают, но один из самых популярных онлайн сервисов для хранения файлов на самом деле поддерживает огромный перечень разных форматов. В их числе и SVG. При этом ничего платить за использование инструмента не придётся.
Autodesk Tinkercad. Бесплатное онлайн приложение, позволяющее разрабатывать 3D проекты и не только. Прекрасное решение для учителей и преподавателей. Также эта программа пользуется спросом среди проектировщиков, школьников, студентов и настоящих энтузиастов.
UnitePDF. Это конвертер, позволяющий сделать из файла формата SVG документ PDF.
Boxy SVG. Простой сервис, который доступен в виде программы, а также онлайн инструмента. В нём предусмотрены простые, но эффективные средства для рисования и редактирования.
Vectr. Достаточно крупный и многофункциональный онлайн сервис. Тут, кстати, тоже есть полноценное приложение для установки и запуска на компьютере. Онлайн редактор Vectr отличается простотой работы, дружелюбным интерфейсом. Прекрасное решение для новичков.

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

Вопрос лишь в том, что нужно конкретному пользователю.

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

Что ещё может вызывать проблемы с файлом

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

В Windows: Adobe Illustrator CC, Adobe Flash Player, Adobe Flash Professional CC, Adobe InDesign CC, Microsoft Visio, CorelDRAW Graphics Suite X, Corel PaintShop Pro X, GIMP, Serif DrawPlus, Inkscape, CADSoftTools ABViewer, Blender, SVG Viewer Extension, Любой вэб-браузер
В Mac OS: Adobe Illustrator CC, Adobe Flash Player, Adobe Flash Professional CC, Adobe InDesign CC, Inkscape, GIMP, Любой вэб-браузер
В Linux: GIMP, Kolourpaint, Inkscape, sK1, librsvg, Любой вэб-браузер
Кроссплатформенное ПО: Embroidermodder, SVG-Edit

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

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

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

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

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

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

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

Другие программы, связанные с расширением SVG

Поскольку различные игры используют разные форматы SVG файлов, вы можете попробовать несколько программ, прежде чем сможете открыть их. Например, сохраненные SVG файлы от игры GTA2 можно редактировать в специальном редакторе GTA2 Saved Game Editor, но в этом редакторе нельзя редактировать SVG-файлы, созданные в Quake III: Team Arena.

ПРИМЕЧАНИЕ: Если вы не знаете программу, которая открывает или редактирует SVG файлы, попробуйте открыть свой SVG файл в текстовом редакторе, например в Блокноте.

Читайте также: