Що таке SVG? Посібник із векторного формату

SVG - формат зображень, що складається не з пікселів, а з інструкцій малювання. Коли логотип, іконку чи діаграму зберігають як SVG, файл містить команди на кшталт "намалюй криву від цієї точки до тієї й заповни її цим кольором". Тому SVG залишається чітким за будь-якого розміру, часто важить зовсім мало, і його можна відкрити й відредагувати в текстовому редакторі. У цій статті розповідаємо про місце SVG серед стандартів W3C, структуру файлу, підтримку браузерами й програмами, ризики безпеки і як конвертувати між SVG та PNG чи JPG.

Що таке SVG?

SVG (Scalable Vector Graphics) - стандарт W3C на основі XML для опису двовимірної векторної графіки. Розширення - .svg, MIME-тип - image/svg+xml. Варіант, стиснений gzip, має розширення .svgz.

Растрові формати (JPG, PNG, WebP) зберігають зображення як фіксовану сітку пікселів; збільште його, і пікселі стануть помітними. SVG описує фігури математично, а браузер чи програма перемальовує їх у тій роздільності, яку має екран. Посібник MDN із форматів зображень називає SVG ідеальним вибором для зображень, які можна подати як команди малювання, особливо коли розмір показу невідомий або змінюється, і зазначає, що для фотографій він зазвичай непридатний.

Історія: SVG 1.0, 1.1 і SVG 2

• 4 вересня 2001 року: SVG 1.0 опублікували як Рекомендацію W3C.
• 14 січня 2003 року: SVG 1.1 став Рекомендацією. Версія 1.1 поділила мову на модулі, що спростило визначення підмножин, як-от мобільних профілів.
• 16 серпня 2011 року: опублікували друге видання SVG 1.1. Саме на цій стабільній версії сьогодні ґрунтуються браузери.
• SVG 2: згідно з історією публікацій W3C, робочі чернетки з'являлися з 2012 року, а перший знімок Candidate Recommendation опублікували 15 вересня 2016 року. Останній знімок датований 6 жовтня 2026 року; документ досі перебуває на етапі Candidate Recommendation.

SVG 2 будується на другому виданні 1.1 і прагне кращої інтеграції з HTML і CSS. Деякі теми, як-от фільтри, маскування та шрифти, перенесли в окремі модулі CSS і FX. На практиці браузери реалізують SVG 2 частково, тож не варто вважати, що кожна можливість працює всюди.

Структура файлу SVG

Простий файл SVG виглядає так:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Система координат: viewBox, width і height

viewBox визначає внутрішню систему координат малюнка (тут від 0 до 100). width і height задають, скільки місця малюнок займає на сторінці. SVG з viewBox пропорційно масштабується до будь-якого розміру, заданого в CSS. Файли без viewBox під час зміни розміру можуть обрізатися - одна з найпоширеніших помилок із логотипами.

Основні елементи

• Фігури: rect, circle, ellipse, line, polyline, polygon і path, який може намалювати що завгодно.
• Текст: text і tspan. Текст залишається доступним для виділення й пошуку, але якщо на пристрої перегляду немає шрифту, використовується запасний.
• Групування та повторне використання: g, defs, symbol, use. Набори іконок часто об'єднують в один файл як елементи symbol.
• Зафарбовування: суцільні кольори, лінійні та радіальні градієнти, візерунки, контури відсікання, маски й фільтри (розмиття, тінь).
• Стиль і анімація: CSS може стилізувати SVG; рух додають анімації CSS та елементи анімації SMIL.
• Вбудований вміст: image для растрових зображень, foreignObject для HTML і script для JavaScript.

Колір, прозорість, шари та сторінки

Прозорість у SVG вбудована: усе, що не намальовано, порожнє, а opacity і fill-opacity визначають напівпрозорість. Шари представлено групами g; Inkscape та Illustrator зберігають свої шари саме так. Кольори за замовчуванням у sRGB, а обмеження бітової глибини у звичному розумінні немає, бо кольори записуються числами. SVG не є форматом багатосторінкових документів; для багатосторінкових креслень краще підходить PDF.

Підтримка в браузерах, системах і програмах

За даними MDN, Chrome, Edge, Firefox, Opera і Safari підтримують SVG. Його можна використовувати через <img>, як CSS background-image, вбудовувати безпосередньо в HTML або через <object> і <iframe>. Векторні редактори, як-от Inkscape, Adobe Illustrator, Affinity Designer і Figma, читають і записують SVG, а актуальні версії Microsoft Office дозволяють вставляти графіку SVG.

Деінде підтримка слабка: багато соціальних мереж, поштових клієнтів, месенджерів і форм завантаження відхиляють SVG або не показують попереднього перегляду. Частково причина в ризику безпеки, описаному нижче.

Безпека: ставтеся до SVG як до документа

SVG - це документ XML, і він може містити елемент script, атрибути подій (як-от onload) і зовнішні посилання. Сторінка MDN "SVG as an image" пояснює, що коли SVG використовується через <img> або як фон CSS, браузери вимикають JavaScript і не завантажують зовнішні ресурси, як-от зображення чи таблиці стилів. Ці обмеження не діють, коли файл відкривають напряму або вбудовують через <iframe>, <object> чи <embed>.

Практичний наслідок: якщо сайт дозволяє користувачам завантажувати файли SVG і віддає їх безпосередньо зі свого домену, вбудований у файл скрипт може виконатися в контексті цього сайту (збережений XSS). Типові заходи захисту:

• Пропускайте завантажені SVG через санітайзер, що видаляє script, атрибути подій, foreignObject і зовнішні посилання.
• Віддавайте файли користувачів з окремого домену, зі суворою політикою Content-Security-Policy або як завантаження (Content-Disposition: attachment).
• Якщо вектор вам не потрібен, конвертуйте завантажені SVG у PNG на сервері й публікуйте лише растрову версію.

Типові сфери застосування

• Логотипи та елементи бренду: один файл залишається чітким від візитівки до білборда.
• Іконки інтерфейсу: їх можна перефарбовувати через CSS, і вони ніколи не розмиваються на екранах із високою щільністю пікселів.
• Діаграми, мапи та схеми: бібліотеки на кшталт D3.js малюють дані безпосередньо в елементи SVG.
• Фавікони: актуальні браузери приймають фавікони SVG через <link rel="icon" type="image/svg+xml">.
• Різання та друк: лазерні та плотерні різаки й вишивальні машини працюють із векторними контурами.

Переваги й недоліки

Типові проблеми та як їх розв'язати

Сайт або застосунок не приймає SVG

Найпростіше рішення - копія у PNG. Наш конвертер SVG у PNG відтворює малюнок у прозорий PNG у вашому браузері з обраною вами шириною в пікселях. Ваш файл не завантажується на сервер і не залишає вашого пристрою.

Текст відображається іншим шрифтом

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

SVG на сторінці має неправильний розмір або обрізаний

Без viewBox або з фіксованими width/height масштабування поводиться не так, як очікується. Додайте до кореневого елемента svg viewBox, що охоплює малюнок, і задайте розмір у CSS.

Файл більший, ніж очікувалося

Графічні редактори записують у SVG службові метадані, зайві десяткові знаки та приховані шари. Оптимізатор на кшталт SVGO їх прибирає. Стиснення gzip або Brotli на сервері ще більше зменшує текстовий SVG.

Мені потрібен мій логотип PNG у форматі SVG

Растрове зображення неможливо по-справжньому "конвертувати" у вектор; інструменти виконують трасування: фігури розпізнаються й перемальовуються як контури. Наші інструменти PNG у SVG і JPG у SVG трасують із кількістю кольорів від 2 до 8. Для простих логотипів і малюнків результат добрий, для фото - грубий. У цих інструментах файл завантажується на наші сервери через захищене з'єднання, трасується там і видаляється щонайпізніше протягом 30 хвилин.

Поради щодо конвертації

• Знайте цільовий розмір: відтворюючи SVG у PNG, обирайте найбільший розмір, у якому показуватиметься зображення, подвоєний для екранів із високою щільністю. У нашому інструменті довша сторона може сягати 4096 пікселів; якщо залишити ширину порожньою, малі малюнки масштабуються так, щоб довша сторона становила 1024 пікселі.
• JPG для фотографічного вмісту: якщо SVG містить вбудоване фото і прозорість не потрібна, JPG або WebP будуть меншими за PNG; PNG можна потім конвертувати в конвертері зображень.
• Фавікони: якщо ваш логотип у форматі SVG, генератор фавіконів приймає його й додає до пакета icon.svg.
• Чисте джерело для трасування: створюючи SVG з PNG, починайте з зображення високої роздільності з однорідними кольорами та без шуму.

Часті запитання

Чим SVG відрізняється від PNG?

PNG - це фіксована кількість пікселів, і під час збільшення він розмивається. SVG описує фігури й чітко перемальовується за будь-якого розміру. SVG підходить для логотипів та іконок, PNG чи JPG - для фото та знімків екрана.

Чи може файл SVG містити вірус?

SVG не є виконуваною програмою, але може містити вбудований JavaScript. Скрипти не виконуються, коли SVG показано як зображення (<img>), але можуть виконатися, якщо файл відкрити безпосередньо в браузері. SVG з невідомих джерел переглядайте у переглядачі або конвертуйте в PNG, а не відкривайте напряму.

Чи можна вставити SVG у Word або PowerPoint?

Актуальні версії Microsoft Office підтримують вставлення SVG. Для старіших версій або якщо ви ділитиметеся файлом з іншими програмами, надійніше використати копію у PNG.

Чи втрачається якість під час конвертації SVG у PNG?

PNG - формат без втрат, але малюнок фіксується в певному розмірі в пікселях. Оберіть достатню ширину, і ви не помітите жодних втрат; якщо ж згодом збільшити PNG, він розмиється.

Чи підтримує SVG анімацію?

Так. Рух можуть забезпечувати анімації CSS, елементи анімації SMIL і JavaScript. Під час конвертації в PNG ви отримаєте один кадр.

Джерела

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: історія публікацій SVG 2
• MDN: SVG as an image
• MDN: посібник із типів і форматів файлів зображень