SVG-файлы: как открыть, создать, изменить и конвертировать
SVG-файл описывает векторное изображение с помощью XML. В нем хранятся контуры, формы, заливки и линии, а не сетка пикселей. Поэтому логотипы, значки, схемы и иллюстрации остаются четкими при любом размере.
Что такое SVG
SVG означает Scalable Vector Graphics и является открытым стандартом W3C. PNG хранит пиксели, а SVG хранит инструкции рисования. viewBox задает внутреннюю систему координат, width и height начальный размер.
Где использовать
Формат подходит для логотипов, интерфейсных значков, карт, диаграмм, линейных иллюстраций и анимаций. Фотографии и текстуры обычно лучше хранить в PNG или JPG. Сложная трассировка может дать файл тяжелее оптимизированного растра.
Как открыть SVG
Перетащите файл в Chrome, Firefox, Safari или Edge. Для проверки масштаба, обрезки и viewBox используйте SVG Viewer. Inkscape, Illustrator и Figma предназначены для редактирования, а редактор кода показывает XML.
Как создать SVG
Экспортируйте рисунок из векторного редактора или задайте простые формы вручную:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" role="img" aria-labelledby="title">
<title id="title">Blue circle and orange square</title>
<circle cx="35" cy="40" r="24" fill="#2563eb" />
<rect x="68" y="18" width="36" height="44" rx="6" fill="#f97316" />
</svg>
Пространство имен нужно для самостоятельного файла. Добавляйте title, если изображение передает смысл.
Редактирование и конвертация
Узлы и кривые изменяйте в векторном редакторе; цвета, viewBox и контуры можно поправить в XML. Проверьте результат в SVG Editor и SVG Viewer. Файлы из неизвестных источников очистите в SVG Sanitizer.
- SVG to PNG для прозрачного растра.
- SVG to JPG для превью без прозрачности.
- SVG to PDF для печати и проверки.
- SVG to Data URI для CSS или HTML.
Проверка перед публикацией
Проверьте отображение, viewBox, пропорции, обрезку и контраст. Удалите лишние метаданные, очистите непроверенные загрузки и сожмите итоговый файл в SVG Optimizer. Исходник храните отдельно.
Частые вопросы
SVG лучше PNG?
SVG подходит для масштабируемых форм, PNG — для фотографий, текстур и фиксированных пикселей.
Можно открыть без графического редактора?
Да, браузер или SVG Viewer сразу покажет файл.
Можно превратить PNG в SVG?
Трассировка создает приближение из контуров. Лучше всего работает простая графика.
Почему SVG пустой?
Проверьте viewBox, обрезку, фон, фильтры и синтаксис XML.
Безопасен ли SVG?
Считайте загрузки непроверенным XML и очищайте их перед встраиванием.
Процесс SVGView
Откройте файл в SVG Viewer, измените в SVG Editor, очистите через SVG Sanitizer, оптимизируйте в SVG Optimizer, а затем при необходимости конвертируйте.