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 Preview / Editor

Какво прави инструментът

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

Често срещани случаи на употреба от разработчици

Дизайнерите на икони тестват viewBox изчисления и дебелини на контури при различни размери. Frontend разработчиците проверяват дали ръчно редактирана SVG икона все още се рендерира правилно след оптимизация (ръчна или чрез SVGO). Имейл разработчиците генерират компактни data URI версии на бранд елементи за inline-ване в HTML. Преподавателите демонстрират как атрибути като preserveAspectRatio и overflow влияят на рендерирането.

Формати на данни, типове или варианти

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

Често срещани капани и гранични случаи

Външни ресурси, реферирани от `use` или `image` елементи с href, няма да се заредят в sandbox-натия iframe. Inline JavaScript в script елементи е блокиран от sandbox-а — анимациите трябва да разчитат на SMIL или CSS keyframes. SVG-ове, които зависят от конкретен шрифт, който не е инсталиран в системата, ще използват fallback по подразбиране; вграждайте шрифтове или използвайте системни шрифтове за прегледи.

Кога да използвате този инструмент вместо код

Използвайте браузърния инструмент за еднократен дизайн на икони, дебъгване или генериране на data URI. За production ресурси пускайте SVG-овете през SVGO с настроена конфигурация, за да премахнете метаданни и да минимизирате маркировката, и използвайте sprite система или правилна интеграция с bundler, за да зареждате икони в приложението си, вместо да inline-вате data URI навсякъде.