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

"Ресайз" изображения звучит просто, но это не так просто как звучит. Поэтому я решил написать статью на эту тему.

Что такое SVG?

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

SVG - это текстовый открытый веб-стандарт. Он явно предназначен для работы с другими веб-стандартами, такими как CSS, DOM и SMIL.

SVG чаще всего используется для значков при разработке сайта или шаблона для dle, wordpress или просто одностраничного лэндинга. Преимущества svg изображений такие-же как у векторного изображения по сравнению с растровыми форматами картинок к примеру: png, jpg.
  Векторная картинка при масштабировании не теряет своей четкости и не начинает выглядеть размытой как к примеру логотип в формате png на мобильном экране.
 Размер svg картинки ощутимо меньше , что положительно сказывается на скорости отображения при первой загрузки сайта.

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

Есть два способа изменить размер изображения SVG. Давайте посмотрим на это один за другим.
1. Изменить ширину и высоту в формате XML
Откройте файл SVG в текстовом редакторе. Он должен показывать строки кода, как показано ниже:

<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Как видите, ширина и высота определены здесь. Так что вам просто нужно изменить ширину и высоту на то, что вы хотите.

Это просто! Правильно?

В моем случае это решение не сработало. Я хотел уменьшить размер изображения, но SVG-изображение не было изменено из файла. Поэтому мне пришлось искать другие пути.

2 . Использовать “background-size”


Другое решение: использовать CSS, Однако опции "ширина" и "высота" не изменили ситуацию. Вместо этого вы должны использовать background-size. Это свойство указывает размер изображения.


Например, вы можете написать так:

i {
  background-size: 20px 30px;
}

Первое значение (20 пикселей) указывает высоту изображения. Второе значение (30 пикселей) указывает ширину изображения.

Однако , если svg файл указан явно в html, к примеру: 

Изменить размер svg изображения можно так-же как и изображения в растровом формате с помощью css параметра width:

.navbar-brand img {
    width: 97px;
}

Всякий раз, когда вы создаете сайт или приложение, скорее всего, вам все равно придется использовать изображение SVG. Всякий раз, когда вам нужно изменить их размер, попробуйте вышеупомянутые способы!
Поделиться: