Онлайн-переглядач та оптимізатор SVG

Переваги SVG для вебу

SVG (Scalable Vector Graphics) — векторний формат зображень на основі XML. Головні переваги: масштабується до будь-якого розміру без втрати якості, маленький розмір файлу для простої графіки, редагується через CSS та JavaScript, підтримує анімацію та інтерактивність. Ідеально для іконок, логотипів та ілюстрацій.

Оптимізація SVG за допомогою SVGO

Графічні редактори (Inkscape, Illustrator) додають в SVG багато зайвих даних: метадані, коментарі, неоптимальні трансформації, зайві атрибути. SVGO видаляє все зайве і може зменшити розмір файлу на 30–70% без видимих змін. Наш переглядач інтегрує SVGO для оптимізації одним кліком.

Вставка SVG у HTML

Три способи: <img src="icon.svg"> — найпростіший, але CSS не можна стилізувати. CSS background-image — аналогічні обмеження. Inline SVG (вставити код SVG прямо в HTML) — повний доступ для CSS і JS, можна змінювати кольори через currentColor. Для іконок, що потребують кастомізації, використовуйте inline або SVG-спрайти.

SVG і доступність

Декоративним SVG додавайте aria-hidden="true". Значущим іконкам — role="img" і aria-label або <title> всередині SVG. Переконайтеся, що SVG-іконки мають достатній контраст і не покладаються виключно на колір для передачі значення.