SVG-графика для веб-сайта

У меня есть еще один, без сомнения, глупый вопрос, с которым я надеялся получить помощь. Традиционно я больше работаю с печатными СМИ, но в настоящее время я пытаюсь создать свой веб-сайт через WordPress и столкнулся с несколькими проблемами. Основной из них пытается использовать файл .svg на моем веб-сайте.

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

Я спускался в глубокую темную кроличью нору статей за статьями, полностью запутывая себя в процессе. В некоторых статьях предлагался какой-то код css, но у меня это не сработало (хотя я мог сделать это неправильно). Однако из того, что я могу собрать, в большинстве статей предлагается загрузить программу под названием «Inkscape» и определить размер файла в «окне просмотра»? И я такой: «Что, черт возьми, за окно просмотра?!» и это то, что я мог бы сделать только в иллюстраторе? ржу не могу

В конце концов, все, что я хочу, это иметь графику .svg, которая будет масштабироваться пропорционально. Есть ли у кого-нибудь предложения о том, как они используют файлы .svg на своем веб-сайте? Спасибо за ваше время, я ценю помощь.

Viewbox: размер артборда.
Не могли бы вы уточнить , как вы используете SVG? В качестве фонового изображения? как <img>или включая <svg>код напрямую?

Ответы (1)

Для простоты вы можете загрузить файлы .svg в wordpress и включить их в свой html-код, как и другие форматы изображений, такие как:

<img src="img/demo.svg" width="200" height="200">

ИЛИ

<img src="img/demo.svg" style="width: 200px; height: 200px;">

ИЛИ

<img src="img/demo.svg" class="demo">

.demo{
width:200px;
height: 200px;
}

небольшая помощь отсюда: https://css-tricks.com/using-svg/

Кроме того, вы можете использовать файлы svg в качестве спрайта svg: https://css-tricks.com/svg-sprites-use-better-icon-fonts/

Огромное спасибо, и ссылки были очень информативными. То есть, если изначально я устанавливаю ширину и высоту в правильных пропорциях, изображение будет масштабироваться в этих пропорциях на нескольких устройствах и дисплеях?
Да, SVG будет действовать как изображение, и обработка ширины и высоты из css позволит вам установить пропорции. В случае проблем на нескольких устройствах вам необходимо использовать медиа-запросы для настройки изображения, как и любого растрового изображения.
SVG-графика для веб-сайта
СпросиСетьПолитика конфиденциальности1y, 0v