SVG розшифровується як Scalable Vector Graphics (масштабована векторна графіка). Це відкритий стандарт W3C для зображень, описаних як інструкції, а не пікселі: намалювати коло тут, пройти за цією кривою, заповнити цю фігуру таким кольором, набрати це слово таким шрифтом. Оскільки зображення є набором вказівок, його можна відтворити в будь-якому розмірі без розмиття чи «квадратів», тому логотипи, іконки, карти та діаграми так часто бувають у форматі SVG.
Як SVG зберігає зображення
Файл SVG - це XML: читаний текст, який можна відкрити в будь-якому редакторі. Елемент <path> містить компактний рядок команд малювання, <rect>, <circle> і <polygon> роблять очевидні речі, <text> містить справжній текст, який можна виділяти, а <g> групує елементи, щоб їх можна було переміщати або стилізувати разом. Атрибут viewBox визначає систему координат, завдяки чому все зображення масштабується коректно.
Оскільки це текст, SVG дуже добре стискається; стиснутий gzipped SVG (іноді з розширенням .svgz) часто становить лише частку початкового розміру. Те, що це текст, також означає, що SVG можна стилізувати за допомогою CSS, анімувати та керувати скриптами. Браузер сприймає його як частину документа, а не як непрозоре зображення.
Остання можливість має важливий аспект безпеки: SVG може містити елемент <script>. У будь-якому місці, де SVG дозволено завантажувати користувачам, його потрібно очищати або віддавати так, щоб код не міг виконуватися. Через це деякі сайти відхиляють SVG, навіть якщо приймають усі растрові формати.
SVG погано підходить як контейнер для фотографій. Усередині нього можна вставити растрове зображення, але тоді ви отримуєте піксельну картинку, загорнуту в XML, без жодної переваги масштабування.
Які метадані містить SVG
У SVG є спеціальний елемент <metadata>, і оскільки стандарт не визначає, що саме в ньому має бути, редактори записують туди багато інформації. Найчастіше там зберігається RDF з використанням термінів Dublin Core: dc:title, dc:creator, dc:date, dc:description, dc:rights та URI ліцензії. Елементи <title> і <desc> також можуть бути в корені документа або на будь-якій окремій фігурі, де вони водночас слугують текстом доступності для скрінрідерів.
Далі йдуть службові дані самого редактора, і зазвичай це найбільша частина. Inkscape записує цілий власний простір імен: геометрію вікна документа, рівень масштабування та положення курсора на момент останнього збереження, напрямні, налаштування сітки, назви шарів і їхню видимість, а також рядок inkscape:version. Illustrator вбудовує пакет XMP із власними ідентифікаторами документа та його історією. Жоден з цих записів нічого не малює.
Звідси два практичні висновки. Дані редактора легко можуть становити більшу частину файлу, тому пропуск SVG через оптимізатор перед публікацією часто зменшує його розмір удвічі. А назви шарів - це текст, який ви самі написали: <g inkscape:label="client logo v3 REJECTED"> невидимий на зображенні, але чудово видно у файлі.
Коли використовувати SVG
Використовуйте SVG для всього намальованого, а не сфотографованого: логотипів, іконок, схем, діаграм, ілюстрацій, карт. Це правильний вибір для вебу, де один файл підходить для будь-якої щільності екрана, і для друку, де його можна масштабувати до будь-якого розміру.
Використовуйте PNG або JPG для фотографій і всього з плавними переходами тону. Експортуйте також плоску растрову копію, коли потрібне зображення, яке відкриється в програмі надто старій або надто обмеженій для роботи з SVG, і видаляйте метадані редактора перед публікацією, щоб зменшити розмір файлу і тому, що назви шарів не завжди призначені для сторонніх очей.