Просмотрщик SVG: предпросмотр, масштаб и экспорт PNG
Просмотрщик SVG — это инструмент предпросмотра SVG для проверки того, как разметка SVG отображается в браузере. Вставьте или перетащите содержимое SVG, чтобы показать его в полностью изолированном iframe, со скриптами, удалёнными из документа. Увеличивайте или уменьшайте масштаб, переключайте шахматный фон для проверки прозрачности, затем скачайте SVG или экспортируйте PNG через canvas.
Просмотрщик SVG — это онлайн-инструмент предпросмотра SVG, который отрисовывает разметку SVG, чтобы вы могли изучить результат в браузере. Вставьте или перетащите содержимое SVG, чтобы увидеть, как выглядит документ, а не полагаться только на его исходный текст. Предпросмотр отображается в полностью изолированном iframe, а скрипты удаляются.
Можно увеличивать или уменьшать масштаб, чтобы рассмотреть отрисованное изображение в разных масштабах, и переключать шахматный фон, чтобы яснее видеть прозрачные области. Когда закончите, скачайте SVG или экспортируйте его в PNG через canvas. Эти элементы управления упрощают предпросмотр SVG онлайн и выбор результата, подходящего для вашей следующей задачи.
SVG — это векторный формат изображений, а PNG — растровый формат изображений. Хранение изображения в SVG полезно, когда нужен векторный документ; экспорт в PNG даёт растровую версию предпросмотра. Просмотрщик поддерживает как скачивание SVG, так и экспорт в PNG, поэтому вы можете изучить исходный формат и создать вывод PNG при необходимости.
Просмотрщик SVG работает полностью в вашем браузере: входные данные обрабатываются на вашем устройстве и не загружаются, не хранятся и не отправляются на сервер. После загрузки страницы он работает офлайн без зависимости от сервера. Он полезен разработчикам и DevOps-инженерам, которым нужно изучить SVG, который они не создавали, проверить его отрисованный вид или экспортировать PNG, не отправляя входные данные никуда.
Шаг 1: Вставьте разметку SVG или перетащите файл SVG в инструмент, чтобы загрузить его для предпросмотра.
Шаг 2: Изучите отрисованный SVG в предпросмотре и проверьте, как выглядят его фигуры и текст.
Шаг 3: Увеличивайте или уменьшайте масштаб, чтобы рассмотреть SVG в разных масштабах.
Шаг 4: Переключите шахматный фон, чтобы прозрачные области было легче увидеть.
Шаг 5: Скачайте файл SVG или экспортируйте предпросмотр в PNG через canvas.
Пример использования: Изучите документ SVG, который вы не писали и который сложно понять, читая только его разметку.
Пример использования: Проверьте, как отображается SVG, прежде чем использовать его в коде, который потребляет или показывает документ.
Пример использования: Просмотрите большой SVG визуально, выясняя, какие части его разметки нужно изучить или отредактировать.
Пример использования: Увеличьте масштаб, чтобы рассмотреть детали в SVG, когда полное изображение сложно оценить в исходном масштабе.
Пример использования: Проверьте прозрачные области, включив шахматный фон.
Пример использования: Экспортируйте предпросмотр SVG в PNG, когда нужно растровое изображение вместо исходного векторного документа.
Пример использования: Скачайте SVG после просмотра его в браузере.