What does the SVG Preview tool do?

It renders SVG markup live as you type, shows extracted attributes (width, height, viewBox), and produces a data: URI you can paste straight into CSS or HTML. Useful for debugging SVG icons, gradients, and viewBox math without spinning up a project.

Is the preview sandboxed?

Yes. The SVG renders inside a sandboxed iframe to isolate it from the rest of the page. Inline JavaScript inside the SVG won't run.

Can I download or copy the SVG?

Yes — copy the raw SVG text or the URL-encoded data: URI from the controls in the header.

Перегляд / редактор SVG

Шахове тло

ширина: 200висота: 200viewBox: 0 0 200 2007 елементів

Вихідний код SVG

Попередній перегляд

Технічні деталі

Як працює перегляд / редактор SVG

Що робить інструмент

SVG Preview / Editor відображає SVG-розмітку в реальному часі під час редагування та витягує метадані (width, height, viewBox, кількість елементів) для швидкої перевірки. Перемикач додає шаховий фон, щоб прозорі ділянки було добре видно. Інструмент також генерує URL-кодований data URI, придатний для прямого використання в CSS background-image або в HTML-атрибутах src.

Поширені сценарії використання для розробників

Дизайнери іконок перевіряють математику viewBox і товщини обводки на різних розмірах. Frontend-розробники переконуються, що вручну відредагована SVG-іконка й далі коректно рендериться після оптимізації (вручну або через SVGO). Email-розробники генерують компактні версії data URI для елементів бренду, щоб вбудовувати їх у HTML. Викладачі демонструють, як атрибути на кшталт preserveAspectRatio та overflow впливають на рендеринг.

Формати даних, типи або варіанти

Вхідні дані — «сирий» SVG XML markup. Вихід — той самий SVG, відрендерений у sandboxed iframe, плюс URL-кодований data URI (data:image/svg+xml;charset=utf-8,…). Метрика кількості елементів рахує кожен відкривальний тег (включно з defs, g, градієнтами та подібними вкладеними елементами), даючи приблизне уявлення про складність. Витягнуті значення атрибутів показуються в «сирому» вигляді.

Поширені помилки та крайові випадки

Зовнішні ресурси, на які посилаються елементи `use` або `image` через href, не завантажаться всередині sandboxed iframe. Вбудований JavaScript у елементах script блокується sandbox’ом — анімації мають спиратися на SMIL або CSS keyframes. SVG, які залежать від конкретного шрифту, що не встановлений у системі, підставлять шрифт за замовчуванням; для прев’ю вбудовуйте шрифти або використовуйте системні.

Коли використовувати цей інструмент, а коли — код

Використовуйте браузерний інструмент для одноразового дизайну іконок, налагодження або генерації data URI. Для продакшн-асетів проганяйте SVG через SVGO з налаштованою конфігурацією, щоб прибрати метадані та мінімізувати розмітку, і використовуйте систему спрайтів або коректну інтеграцію з бандлером для завантаження іконок у застосунку замість того, щоб всюди інлайнити data URI.