ПОТРЯСАЮЩИЙ SVG

ПОТРЯСАЮЩИЙ

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

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML.

❶ Высокая степень сжатия ☑

❷ Быстрый рендер - отрисовка ☑

❸ Быстрое редактирование элементов ☑

❹ Присвоение "a href=" элементам рисунка ☑

❺ Легкая вставка внутрь svg других .svg ☑

❻ Легкое встраивание рисунка в тело "body" страницы ☑

❼ Возможность анимации отдельных элементов рисунка ☑

❽ Интерактивность через обработчик событий ☑

❾ Масштабируемость - SVG является векторным форматом ☑

❿ Быстрая правка рисунка в блокноте "notepad" ☑

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

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

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

✯ Анимация реализована в SVG с помощью языка SMIL (Synchronized Multimedia Integration Language), разработанного также консорциумом W3C. Поддерживаются скриптовые языки на основе спецификации ECMAScript. SVG-элементами можно управлять с помощью JavaScript. Применение скриптов и анимации в SVG позволяет создавать динамичную и интерактивную графику. В SVG обеспечивается событийная модель, отслеживаются события (загрузка страницы, изменение её параметров, события мыши, клавиатуры и др.). Анимация может запускаться по определённому событию (например «onmouseover» или «onclick»), что придаёт графике интерактивность. У каждого элемента есть свои собственные события, к которым можно привязывать отдельные скрипты.

✯ SVG - открытый стандарт. В отличие от некоторых других форматов, SVG не является чьей-либо собственностью.

✯ SVG-документы легко интегрируются с HTML- и XHTML-документами. Элементы SVG совместимы с HTML и DHTML.

✯ Совместимость с CSS (англ. Cascading Style Sheets). Отображением (форматированием и декорированием) SVG-элементов можно управлять с помощью таблицы стилей CSS 3 и её расширений либо напрямую с помощью атрибутов SVG-элементов.

Практические советы

✯ Для Просмотра SVG изображений проводником Windows необходима установка расширения "SVG Explorer Extension".

Также можно использовать "SVGViewer". Возможности: - Navigate through other svg files in that directory, - Print, - FullScreen mode, - Zoom SVG. Недостатки: полное отсутствие анимации SVG (при ее наличии), возможны искажения при рендеринге (Например в SVG присутствует инструкция CSS, она работать не будет - т.к. Проводник Windows не отображает стили CSS). Эти программы служат больше для общей ориентировки при поиске нужного файла. Основным средством просмотра SVG является любой современный браузер: CHROME, FIREFOX, OPERA, etc.

✯ Создание SVG и Сложная правка делаются при помощи программ типа: Adobe Illustrator, CorelDRAW, GIMP, Inkscape, Sketch(для macOS)...

✯ Легкая правка - например изменение цвета, размера, добавление анимации - возможна при помощи любой программы типа "Блокнот". Подробности: открываем файл браузером и открываем средства разработчика(F12), этот же файл открываем в Блокноте. Отыскиваем необходимый элемент и производим изменения или дополнения.

✯ При вставке одного SVG файла в другой необходимо удалить повторяющиеся инструкции заголовка. Просмотреть наличие повторений в названиях классов. (Например основной файл имеет:
<style>.st1{fill:red;}</style>, а вставляемый файл содержит:
<style>.st1{fill:blue;}</style>. Для избежания затирания и сохранения обеих инструкций - переименуйте во вставляемом файле .st1 к примеру в .st_1 , включая обращения элементов к классу). Вставляемый файл неоходимо поместить в группу:
<g id="input_file">Input File</g> . Тогда с ним возможны манипуляции:
<g id="input_file" style="transform:scale(1.1)translate(10px,10px);">Input File</g>

✯ Сжатие SVG файла возможно как вручную(удаление ненужных пробелов, переносов и отступов), так и посредством онлайн сервисов.