SVG Viewer
Вставьте исходную SVG-разметку и сразу посмотрите отрендеренный результат.
Предпросмотр отключает скрипты и внешние ссылки, но при этом позволяет проверять viewBox и размеры.
Предпросмотр SVG: вставьте исходный код и сразу проверьте результат
Проверка viewBox и размеров: проверьте прозрачность и потенциально небезопасное содержимое
Как пользоваться
- Вставить SVG код or загрузить an `.svg` file.
- Меняйте фон и масштаб для детальной проверки рендеринга.
- Проверьте атрибут viewBox, сведения о размерах и предупреждения, после чего при необходимости сохраните файл SVG.
Пример
Simple иконка SVG
Ввод
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><круг cx="60" cy="60" r="52" fill="#0ea5e9"/><path d="M36 62l16 16 32-40" fill="none" stroke="#fff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
Вывод
Будет отрисован синий круглый значок, а на панели информации отобразится viewBox со значением `0 0 120 120`.
Вопросы и ответы
Мои SVG загрузкаed anywhere?
Нет. Скопированный код SVG и загруженные файлы обрабатываются только в вашем браузере и не отправляются на сервер.
What happens to SVGs that contain скрипт or foreignObject?
В целях безопасности эти элементы удаляются перед рендерингом, а на панели информации выводится предупреждение.
Будут ли файлы SVG с внешними изображениями или шрифтами выглядеть абсолютно одинаково?
Не всегда. Поскольку внешние ссылки отключены, внешний вид макета может отличаться от оригинала. Задача этого инструмента — обеспечить безопасный локальный анализ файлов.
Why does my SVG not отрисовать?
Обычно это связано с невалидным кодом XML, некорректными значениями атрибутов или отсутствием корневого элемента `svg`. Изучите сообщение об ошибке, выдаваемое инструментом.
Зачем мне менять фон?
Прозрачные области и светлые иконки могут выглядеть совершенно по-разному в зависимости от фона, поэтому инструмент позволяет быстро переключаться между клетчатым, белым и темным фонами.
Примечания
- Из соображений безопасности внешние ссылки URL и небезопасные элементы блокируются перед рендерингом.
- Файлы SVG, зависящие от внешних шрифтов или изображений, могут отображаться некорректно по сравнению с оригинальным окружением.
- Очень большие файлы SVG автоматически отключают режим интерактивного предпросмотра; для их отображения потребуется запустить рендеринг вручную.