Векторне зображення SVG (.svg)
Рекомендація СтандартScalable Vector Graphics (SVG): це формат векторних зображень на основі XML для двовимірної графіки з підтримкою інтерактивності, стилізації CSS та анімації.
Конвертувати з SVG у PNG
Безкоштовний конвертер з SVG у PNG у браузері. Миттєво конвертуйте файли на своєму пристрої.
Стиснути SVG онлайн
Приватно - файли ніколи не залишають ваш пристрій
Аналіз та метадані
Операційні системи та аналізатори файлів ідентифікують файли SVG, перевіряючи початкову послідовність бінарних байтів:
Сигнатура заголовка на байтовому рівні (Magic Bytes)
Операційні системи та аналізатори файлів ідентифікують файли SVG, перевіряючи початкову послідовність бінарних байтів:
ШІСТНАДЦЯТКОВА СИГНАТУРА (ЗСУВ 0):
3C 73 76 67ПОДАННЯ В ASCII: <svg
Стандартизація: Рекомендація W3C (SVG 1.1 / SVG 2)
Технічні характеристики
| Архітектура контейнера | Текстовий документ розмітки на основі XML, що визначає 2D векторну геометрію |
| Стиснення | Текстове стиснення Gzip / Brotli (SVGZ використовує стиснення gzip) |
| Порядок байтів (Endianness) | Не застосовується (текстовий потік символів UTF-8 / UTF-16) |
| Колірні простори | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| Канали та структура | Векторні фігури з необмеженою роздільною здатністю, криві Без'є, типографіка та маски прозорості |
| Максимальні розміри | Незалежно від роздільної здатності (масштабується нескінченно до будь-якого вікна перегляду без пікселізації) |
| Прозорість | Повна змінна альфа-прозорість та режими змішування CSS |
| Потокове та прогресивне завантаження | XML-парсер браузера підтримує поступовий розбір текстового потоку. |
Технічна матриця порівняння: SVG проти конкурентів
| Технічний атрибут | SVG (Поточний) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Модель відображення | Векторний DOM зі збереженим станом | Растрове полотно з безпосереднім режимом відображення | Контейнер фіксованої сторінки зі збереженим станом | Растрова сітка пікселів |
| Стилізація та CSS | Повністю підтримує стилізацію за допомогою класів CSS і змінних. | Потребує перемальовування полотна через JavaScript Canvas API. | Відсутня динамічна стилізація CSS | Фіксовані растрові пікселі |
| Нескінченна масштабованість | Так (математичні векторні криві) | Вимагає ручного масштабування роздільної здатності | Так (векторні елементи) | Ні (пікселізується під час збільшення) |
| Інтерактивність | Вбудовані події DOM (наведення, клацання, анімація) | Потребує власних обчислень для визначення влучання в об’єкт. | Статичний документ | Вимагає карти зображення або полотна |
Типові режими пошкодження та посібник з відновлення в шістнадцятковому форматі
Браузер відображає помилку синтаксичного аналізу XML: незакритий токен або невідповідний тег.
Першопричина: Пошкоджений синтаксис XML, відсутність закритих тегів або неекрановані амперсанди ('&' замість '&').
Відновлення: Перевірте за допомогою лінтера XML (xmllint file.svg) та виправте незбалансовані теги.
Аналіз безпеки та векторів атак на парсери
Оскільки SVG: це виконуваний XML, що підтримує теги «<script>» і зовнішні сутності, відображення недовірених SVG-файлів створює значні ризики XSS і SSRF.
Відомі вектори атак
- Збережений міжсайтовий скриптинг (XSS) через вбудовані теги '<script>' або обробники подій 'onload='.
- Атаки з використанням зовнішніх сутностей XML (XXE), що дають змогу читати локальні файли сервера, коли документ розбирається на серверній частині.
- Розгортання XML-сутностей в атаці «Billion Laughs», що спричиняє відмову в обслуговуванні.
Рекомендації щодо захисту: Перед вбудовуванням завжди очищуйте SVG за допомогою DOMPurify або віддавайте SVG із заголовком «Content-Security-Policy: default-src 'none'», або використовуйте теги «<img>», які автоматично вимикають скрипти.
Історичне походження та віхи
Основні переваги
- Не залежить від роздільної здатності: лінії та типографіка залишаються чіткими за будь-якого масштабу на екрані чи під час друку.
- Надзвичайно малий розмір файлу для логотипів, іконок та елементів інтерфейсу користувача.
- Повністю підтримує скрипти та стилізацію через CSS і JavaScript всередині DOM браузера.
Технічні обмеження та недоліки
- Не підходить для фотографій або складних зображень із неперервним тоном.
- Складні векторні контури з тисячами вузлів можуть сповільнити відображення через навантаження на процесор і швидко розряджати батарею.
- Оскільки SVG побудований на XML, у нього можна вбудовувати скрипти. Тому перед відображенням ненадійних завантажених файлів їх потрібно ретельно очищувати.
Цікаві технічні факти
- Gzip може суттєво зменшити розмір деяких файлів SVG; ступінь зменшення залежить від вмісту документа й налаштувань стиснення.
- Атрибут viewBox визначає абстрактне полотно координат, яке динамічно зіставляється з фізичними пікселями екрана.
- У ранніх веббраузерах не було вбудованих рушіїв SVG, тому Adobe розповсюджувала плагін Adobe SVG Viewer, доки підтримка SVG у браузерах не закріпилася приблизно у 2011 році.
Поширені технічні запитання
Чи можуть файли SVG містити шкідливий код?
Так. Оскільки SVG є дійсним XML, він може містити вбудований JavaScript ('<script>'), який виконується, якщо SVG завантажується безпосередньо в браузер або відкривається у вбудованому елементі '<svg>'. Надсилання SVG через тег '<img>' автоматично нейтралізує виконання скриптів.
Коли варто використовувати SVG замість PNG?
Використовуйте SVG для іконок, логотипів, діаграм, ілюстрацій та типографіки, де потрібне чітке масштабування для всіх розмірів екрана та малий розмір файлів. Використовуйте PNG або WebP для фотографій.
Як можна оптимізувати великі або складні файли SVG?
Ви можете очистити векторні контури, видаливши зайві метадані, коментарі редактора (з Inkscape або Illustrator), невидимі групи та невикористані оголошення просторів імен за допомогою таких інструментів, як SVGO, або шляхом стиснення SVG.
Пов'язані пари конвертації SVG
Перетворення файлів векторної графіки SVG у растрові зображення PNG перетворює масштабовану графіку на основі коду на фіксовану сітку пікселів для універсальної сумісності з додатками.
Вбудуйте растрові зображення PNG у векторний контейнер SVG з XML-розміткою для адаптивного масштабування на вебсторінках і роботи з векторними макетами.
Перетворюйте застарілі 16-бітні записи команд векторного малювання Windows GDI на сучасні масштабовані контури SVG без втрати роздільної здатності.
Конвертуйте 32-бітну графіку Windows Enhanced Metafile у чисті, адаптивні вектори SVG для вебпрограм та дизайну.
Конвертація креслення DXF у формат SVG перетворює складні інженерні векторні дані на легку XML-графіку для веб-переглядачів та векторних редакторів.
Перетворення масштабованої векторної графіки у формат обміну кресленнями перетворює візуальні вектори, готові для вебу, на точні математичні координати, необхідні для програмного забезпечення САПР.
Поділіться логотипом або ілюстрацією SVG як односторінковим PDF. Його масштабовані контури перетворюються на зображення з фіксованою роздільною здатністю, тому збільшення масштабу не відновлює векторну деталізацію.