Как изменить размер изображения SVG
Содержание статьи
Предполагаю, что даже опытный разработчик может столкнуться с такой, казалось бы, простой проблемой.
Что такое SVG?
SVG отлично подходит для отображения логотипов, иконок, карт, флагов, графиков и другой графики, созданной в векторных графических редакторах типа Illustrator, Sketch и Inkscape. SVG позволяет “залить” Ваш логотип в супер-качестве и в высоком разрешении на сайт, и при этом будет весить в десятки раз меньше изображения в формате png.
SVG означает «Масштабируемая векторная графика». Согласно MDN, определение SVG приведено ниже.
Масштабируемая векторная графика (SVG) - это язык разметки на основе XML для описания двухмерной векторной графики. По сути, SVG для графики - это то же самое, что HTML для текста. SVG - это открытый веб-стандарт на основе текста. Он специально разработан для работы с другими веб-стандартами, такими как CSS, DOM и SMIL.
SVG чаще всего используется для изображений и значков при разработке приложений. Если вы работаете с веб-дизайнером, он или она будет отправлять вам изображения в формате SVG, а не в формате JPEG или PNG (если это опытный веб-дизайнер). Поэтому для FrontEnd-разработчика очень важно знать, как работать с SVG.
Как изменить размер изображения SVG
Предлагаю два варианта на выбор. Они оба очень просты в своём исполнении.
1. Измените ширину и высоту в формате XML.
Откройте файл SVG в текстовом редакторе (например notepad++). Он должен показать строки кода, как показано ниже.
svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet"
Как видите, здесь определены ширина и высота в pt (пунктах). Поэтому вам просто нужно изменить ширину и высоту на те значения, которые вам необходимы.
В моем случае это решение не сработало. Я хотел уменьшить размер изображения, но изображение SVG, которое мне прислал дизайнер, нельзя было каким-то образом изменить из файла. Поэтому пришлось искать другие пути.
2. Используйте “background-size”
Другое решение – использовать CSS. Однако использование “width” и “height” не решают проблему.
Вместо этого необходимо использовать background-size. Это свойство определяет размер изображения.
Например, можно написать:
i {
background-size: 20px 30px;
}
Первое значение (20px) назначает высоту изображения. Второе значение (30px) назначает ширину изображения.
Если занимаетесь веб-разработкой, то вам наверняка придется работать с изображениями в формате SVG. Если появится необходимость в изменении размера отображения SVG-файла, то воспользуйтесь одним из двух представленных способов.
Полезные ссылки
Генератор бесплатных фоновых изображений из SVG: https://www.svgbackgrounds.com/
Примеры SVG-изображений: https://commons.wikimedia.org/wiki/SVG_examples
Конвертер из PNG в SVG: https://convertio.co/ru/png-svg/ (в редакторе значение у fill заменить на необходимый цвет)
Конвертер из pt в px, ems, % и обратно: https://simplecss.eu/pxtoems.html
Отличный блокнот: https://notepad-plus-plus.org/downloads/
Комментарии