SVG-редактор онлайн с живым превью
Показывает SVG одновременно как код и как картинку: правите разметку — превью обновляется сразу. Код остаётся у вас, редактор ничего не отправляет на сервер.
Откройте SVG-файлы
До 50 файлов по 10 МБ или вставьте код через Ctrl+V. Код не покидает ваш компьютер.
Возьмите иконку из каталога
Как пользоваться
Как редактировать SVG онлайн
- Вставьте SVG-код через Ctrl+V или откройте файл — перетаскиванием либо кнопкой выбора.
- Правьте разметку в редакторе: превью обновляется при каждом изменении.
- Скопируйте готовый код или скачайте SVG-файл.
В SVG-редактор можно открыть и иконку из каталога: выберите её с помощью блока «Возьмите иконку из каталога», и код появится без скачивания. Так удобно разобрать устройство иконок карт и локаций, научных иконок или значков природы и животных, прежде чем адаптировать их под проект.
Что можно поправить в коде
- Размер. width и height задают размер по умолчанию. Если их убрать, встроенная иконка растянется на ширину контейнера — тогда размер задают в CSS.
- Область рисунка. viewBox — система координат. Если иконка обрезана или прижата к краю, проверьте его значения.
- Цвет. fill отвечает за заливку, stroke — за обводку, значение currentColor берёт цвет из CSS.
- Линии. stroke-width меняет толщину обводки, stroke-linecap и stroke-linejoin — форму концов и углов.
- Подпись. Добавьте
<title>смысловой иконке — его прочитают экранные читалки.
Код не покидает браузер
Редактор работает целиком на стороне клиента: файл читается локально, превью рисует сам браузер, на сервер ничего не отправляется. Одновременно открывается до 50 файлов (каждый до 10 МБ), а правки скачиваются одним ZIP-архивом.
Типичные ошибки
- Нет xmlns. Отдельному файлу нужен
xmlns="http://www.w3.org/2000/svg", иначе браузер не отрисует его как картинку. При вставке кода прямо в HTML атрибут можно опустить. - Ни размеров, ни viewBox. Такой SVG браузер покажет в размере по умолчанию 300×150 px, и иконка окажется в углу пустого поля.
- Обрезанная обводка. Линия у самого края viewBox наполовину выходит за границу — оставляйте поле хотя бы в половину толщины линии.
- Ручная правка путей. Менять координаты в атрибуте d вручную рискованно — форму удобнее править в векторной программе.
Закончив правки в редакторе, облегчите файл в оптимизаторе SVG, массово замените цвета перекраской SVG, а растровую версию сделайте конвертером SVG в PNG. Об отличиях форматов — в статье чем SVG отличается от PNG.
Частые вопросы
- Как открыть SVG-файл онлайн?
- Перетащите файл в редактор, выберите его на диске или вставьте код через Ctrl+V. Код и превью откроются рядом.
- Можно ли рисовать в этом редакторе?
- Это редактор кода, а не графический: фигуры меняются через атрибуты и пути в разметке. Он удобен, чтобы быстро поправить размер, цвет или viewBox и удалить лишнее, а рисовать иконку с нуля проще в векторной программе.
- Зачем нужен viewBox?
- viewBox задаёт систему координат рисунка — например, 0 0 24 24 для иконки на сетке 24×24. Благодаря ему SVG масштабируется под любой размер из CSS, а если сузить viewBox, часть рисунка обрежется.
- Как вставить SVG на сайт?
- Три способа: тегом img со ссылкой на файл, вставкой кода прямо в HTML или фоном через CSS. Встроенный код удобен, когда иконку нужно перекрашивать и анимировать через CSS.
- Безопасно ли открывать чужие SVG?
- SVG — это код, и в нём бывают скрипты, обработчики событий вроде onload и ссылки на внешние ресурсы. Просмотрите разметку перед публикацией на сайте и удалите всё лишнее.