Что такое svg формат

Описание формата SVG

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

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

Scalable Vector включает в себя определенный набор функционала, среди которого альфа-маски, опции применения шаблонов, наложение эффектов фильтров и так далее. Открыть файл, имеющий расширение .svg, можно при помощи практически любого современного браузера. Операционная система Windows предполагает возможность открыть файл SVG с помощью просмотрщика Microsoft Visio или посредством таких программных комплексов, как CorelDRAW Graphics Suite и Adobe Illustrator, а также CADSoftTools ABViewer и Corel PaintShop Pro.

Следует знать, что составляющие файла расширением .svg, могут занимать достаточно большое количество места, поэтому был создан формат .SVGZ, в нем применяется технология сжатия gzip. Vector Graphics даёт пользователям возможность сжимать, а также индексировать изображения, кроме того, файл расширением SVG включает в себя способность выполнять поиск требуемого изображения.

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов (не путать с имитацией трёхмерности путём светотени). Это открытый стандарт, который является рекомендацией консорциума W3C — организации, разработавшей такие стандарты, как HTML и XHTML. В основу SVG легли языки разметки VML и PGML. Разрабатывается с 1999 года. В 2001 году вышла версия 1.0, в 2011 — версия 1.1, которая остаётся актуальной до сегодняшнего дня. В настоящее время в активной разработке находится версия 2.

Содержание

Возможности языка [ править | править код ]

  • Описание путей (англ. path ). Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. Строка с данными задаётся атрибутом d тега path и содержит команды, закодированные набором букв и чисел. Буква определяет тип команды, числа — её параметры (чаще всего — координаты). Команды позволяют описывать фигуры, состоящие из отрезков прямых ( L , H , V ), кривых Безье ( C , S , Q , T ) и дуг ( A ). Пример, описывающий звезду из 5 линий, содержит строку данных с командами M (англ. moveto — переместить) и L (англ. lineto — нарисовать линию), содержащими в качестве аргументов координаты точек по X и Y. В версиях SVG до 1.2 включительно описание путей возможно только в пикселях.
  • Описание основных геометрических фигур (многоугольники, прямоугольники, окружности и т. п.).
  • Широкий спектр визуальных свойств, которые можно применить к фигурам и путям: окраска, прозрачность, скругление углов и т. д.
  • Интерактивность. На каждый отдельный элемент и на целое изображение можно повесить обработчик событий (клик, перемещение, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком (например — перемещать мышкой некоторые элементы [1] ).
  • Анимация и сценарии. С помощью ECMAScript или JavaScript можно описывать даже самые сложные сценарии, связанные с математическими вычислениями координат и пропорций фигур. Вместе с интерактивностью и SMIL-анимацией это даёт очень широкие возможности для разработчиков веб-графики.
Читайте также:  Видеокамера panasonic sdr s50

Достоинства формата [ править | править код ]

  • Текстовый формат — файлы 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 подключаются через тег , значение атрибута data — имя файла с расширением «.svg», содержащего разметку SVG, type — MIME-тип, то есть image/svg+xml. Атрибуты w >Cascading Style Sheets ). Отображением (форматированием и декорированием) SVG-элементов можно управлять с помощью таблицы стилей CSS 2.0 и её расширений, либо напрямую с помощью атрибутов SVG-элементов.
  • SVG предоставляет все преимущества XML:
  • Возможность работы в различных средах.
  • Интернационализация (поддержка Юникода).
  • Широкая доступность для различных приложений.
  • Лёгкая модификация через стандартные API — например, DOM. SVG поддерживает стандартизированную W3C объектную модель документа DOM, обеспечивая доступ к любому элементу, что даёт широкие возможности по динамическому изменению элементов, их атрибутов и событий.
  • Лёгкое преобразование таблицами стилей XSLT. Как любой основанный на XML формат, SVG даёт возможность использовать для его обработки таблицы трансформации (XSLT). Преобразуя XML-данные в SVG с помощью простого XSL, можно легко получить графическое представление любых данных, например визуализировать химические молекулы, описанных на языке CML.

Недостатки формата [ править | править код ]

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

Структура документа SVG [ править | править код ]

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

Читайте также:  После обновления андроид не видит сим карту

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

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

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

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

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

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

Примеры [ править | править код ]

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

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

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

SVGZ [ править | править код ]

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

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

Привет всем, наши дорогие фанаты свободной конвертации. Сегодня у нас на рабочем столе интереснейший проект под кодовым названием Scalable Vector Graphics или кратко SVG. Почему на иностранном языке? Чтобы никто не догадался.

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

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

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

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

Начнем от внешней оболочки, перейдем к внутреннему содержанию и далее, не побоимся этого слова – проникнем в самую сущность исследуемого явления.

Как вы могли слышать – графика бывает двух типов.

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

Что вы видите?

Правильно – картинка составляется из миллионов разноцветных точечек. Это и есть растр. Поэтому такой тип графики и называется "растровым".

Переходим ко второй части эксперимента. Поверьте, вам предстоит намного более весело провести время, а может даже найти себе приключений на кой-чего.

Одевайте свою самую модную одежку, звоните другу или подружке. Мы отправляемся в ночной клуб. Зачем? Изучать графику векторную.

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

Когда дымовал достаточно загустеет, DJ нажимает еще одну кнопочку. Запускается лазерная пушка и над головами танцующей толпы начинает плясать что-то вроде северного сияния.

Это и есть векторная графика. Лазерный луч непрерывен и рисует картины согласно заложенному в компьютерной программе алгоритму – цифровому визуальному образу.

Именно так и работает SVG – это цифровое программное описание графических образов, цветов и их поведения.

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

Читайте также:  Как поменять ттл на айпаде

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

Технологическое решение SVG

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

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

Да-да, файл графики в формате SVG представляет собой текстовый файл XML, наполненный тегами, примерно как в HTML, и данными, структурированными при помощи XML. Логически предположить, что SVG-графику можно интегрировать непосредственно в HTML-код веб-страницы, форматировать при помощи таблиц стилей CSS и даже подключать программные сценарии Javascript.

Просто запустите свое воображение (можно чашечку капучино, плиз) и попытайтесь предоставить бесконечные возможности векторной графики, генно-модифицированной тегами HTML5.

  1. Во-первых, векторная графика по определению масштабируется без потерь в качестве картинки (потому что пикселей-то нет и при увеличении изображение не будет превращаться в картину художника-кубиста).
  2. Во-вторых, SVG полностью совместим с веб-технологиями и поэтому становится органичной частью сайтов.
  3. В-третьих, добавляя в цифровое описание картинки объекты и подключая к ним сценарии Javascript – мы делаем изображение интерактивным, то есть реагирующим на определенные действия пользователя заданными ответами.
  4. В-четвертых, SVG – текстовый формат, поэтому можно оптимизировать файл под SEO без внешних мета-тегов, прямо вписывая ключевые слова в код изображения.

Исходя из этих технических спецификаций мы и выведем сферу применения SVG.

Как можно использовать SVG для пользы и выгоды

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

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

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

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

Самое полезное – SVG-графика наилучшим образом подходит для электронной коммерции.

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

На этой основе можно разработать интерактивный обзор товара со всех сторон и даже изнутри.

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

После того, как клиент узнает страшную тайну о своем страшном недуге, рука сама тянется кликнуть мышью по соседнему участку SVG-картинки с красной кнопкой "Купить лекарство от всех болезней". Достаточно одной таблэтки. Price$1000.

Вот какое полезное изобретение, этот SVG.

Способы конвертации в SVG

На нашем сайте мы предлагаем вам конвертацию различными методами:

А можно как-то уменьшить размер SVG?

Да! С помощью специальных программ, например SVGO, или на нашем сайте с помощью функции оптимизации SVG.

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

  • очистка атрибут из новый линий и повторяющихся объектов;
  • удаление описание типа документа;
  • удаление XML инструкций;
  • удаление комментариев;
  • удаление метадаты;
  • и другие элементы информации.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector