ЧУДОВИЙ 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 файлу можливе як вручну (видалення непотрібних прогалин, переносів та відступів), так і за допомогою онлайн сервісів.