SVG пример

Как изменить размер изображения SVG

Содержание статьи

Предполагаю, что даже опытный разработчик может столкнуться с такой, казалось бы, простой проблемой.

Что такое SVG?

SVG отлично подходит для отображения логотипов, иконок, карт, флагов, графиков и другой графики, созданной в векторных графических редакторах типа Illustrator, Sketch и Inkscape. SVG позволяет “залить” Ваш логотип в супер-качестве и в высоком разрешении на сайт, и при этом будет весить в десятки раз меньше изображения в формате png.

SVG означает «Масштабируемая векторная графика». Согласно MDN, определение SVG приведено ниже.

Масштабируемая векторная графика (SVG) - это язык разметки на основе XML для описания двухмерной векторной графики. По сути, SVG для графики - это то же самое, что HTML для текста. SVG - это открытый веб-стандарт на основе текста. Он специально разработан для работы с другими веб-стандартами, такими как CSS, DOM и SMIL.

MDN

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/

Рекомендованные статьи

15 примеров SVG-анимации для веб-дизайнеров

SVG (масштабируемая векторная графика) имеет ряд преимуществ по сравнению с другими форматами изображений, используемыми в Интернете. Прежде всего, SVG-файлы масштабируемы, поэтому их можно адаптировать к…

Комментарии