Как уменьшить svg css

Как изменить SVG иконку: атрибуты и CSS свойства

HTML, CSS

В предыдущих сериях…

Сегодня будем работать с inline кодом, посмотрим, какие бывают атрибуты у тега <svg> . Разберем случай, почему может не работать смена цвета иконки, прописанная в файле CSS.

Где взять inline код SVG-иконки

Если вы скачали готовую графику в формате .svg, то этот файл можно открыть в любом редакторе кода и увидеть тот самый inline код. Как мы помним, векторная графика описывает изображение с помощью специальных формул для создания фигур. При этом используются тег <svg> (контейнер для хранения SVG графики), внутри которого помещается один или несколько тегов <path> (для хранения координат прорисовки фигуры или части её). Этот код можно скопировать и вставить в html файл в том месте, где нужно расположить иконку.

Для примера возьмем иконку твиттера. Скопируем тег svg из файла иконки и вставим в HTML.

Содержимое svg кода

Итак, мы подключили иконку в формате svg inline, теперь рассмотрим код подробнее.

Так отобразится в браузере:

Пример inline кода

Мы видим тег <svg> и <path> , у которого есть атрибут d с координатами точек на плоскости, по которым рисуется фигура. В данном случае тег <path> один, изображение состоит из одной фигуры, но изображение может состоять из нескольких фигур &#8212; тогда будет несколько тегов <path> .

Атрибуты

Перейдем к атрибутам тега <svg>

xmlns="http://www.w3.org/2000/svg" &#8212; данный атрибут прописывает путь к стандарту svg, в котором описана эта иконка

viewBox="0 0 512 512" &#8212; указывает на ту область иконки, которую мы видим в браузере

class="twitter-icon" &#8212; как и другим элементам, можно задать класс и стилизовать по нему в CSS файле

Теперь добавим некоторые атрибуты самостоятельно.

width="256" height="256" &#8212; при помощи этих атрибутов можно настраивать размер иконки

Атрибуты fill , stroke , stroke-width в SVG

Эти атрибуты можно применить к тегу <svg> и тогда они распространятся на всю иконку. А можно применить к отдельному <path> &#8212; тогда они будут работать только в области, описанной в конкретном <path> . В нашем случае иконка состоит всего из одного <path> , поэтому без разницы, к чему применить данные атрибуты.

fill="red" &#8212; заливка цветом

stroke="green" &#8212; цвет обводки

stroke-width="10" &#8212; толщина обводки

Вот так мы переделали иконку при помощи атрибутов:

Пример inline кода с атрибутами

Интерактив по ховеру

При помощи CSS будем менять поведение иконки при наведении на нее курсором (по ховеру). Вернемся к изначальному коду без дополнительных атрибутов. Копируем класс иконки и стилизуем в файле CSS. Зададим свойство fill: blue; и далее по псевдоклассу :hover меняем на fill: rgb(145, 8, 199);

Результат в браузере:

Пример inline кода, стилизация в CSS

Внимание!

Этот прием будет работать только в том случае, если в html коде фигуры не прописан нигде атрибут fill="" . Если вы работаете в CSS, то лучше убирать все атрибуты типа fill и stroke , чтобы не было путаницы. И переносить их в файл CSS в качестве свойств.

Заключение

Любой файл .svg можно открыть в редакторе кода. Сам код можно копировать и использовать в файле .html

Кастомизировать иконку можно при помощи атрибутов. Но создать интерактивность получится только при помощи стилизации в CSS файле. При этом важно следить за тем, чтобы контроль заливки или других свойств, которые будут меняться, происходил только в одном месте, в файле .css . В противном случае интерактив не заработает, так как значения атрибутов перебьют значения свойств.

Как уменьшить размер иконки в svg через css?

Сам долго бился с SVG и нашёл самый действенный и безотказный метод:

в ту сторону, какую вам нужно, всё работает.

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css css3 html5 или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как масштабировать упрямый SVG, встроенный в тег?

у меня есть некоторые SVG-файлы, которые указывают width и height а также viewbox такой:

но как отобразить их в браузере в размере, который я решаю? Я хочу, чтобы они были меньше и попробовали:

но затем я получаю видимые полосы прокрутки.

это работает, если я изменю файлы SVG на set width и height to 100% вместо этого, но я хочу решить размер в HTML независимо от того, какие размеры используются в файле SVG. Это возможно ?

9 ответов

вы можете добавить атрибуты "preserveAspectRatio" и "viewBox" в <svg> тег для этого.

открыть .SVG-файл в редакторе и найдите <svg> тег. в этом теге добавьте следующие атрибуты:

замените и некоторыми значениями по умолчанию для окна просмотра. Я использовал значения из атрибутов" width "и" height " тега SVG, и это, казалось, работало.

сохранить SVG и теперь масштаб ожидаемый.

Я нашел эту информацию здесь:

ни один из ответов, приведенных здесь, не работал для меня, когда я спросил Это еще в 2009 году. Поскольку у меня теперь была та же проблема, я заметил, что с помощью <img> тег и ширина вместе с svg отлично работают.

вы можете добраться до встроенного svg с помощью JavaScript:

поскольку ваш svg уже имеет viewBox, Firefox должен масштабировать ширину 576 пикселей в viewBox до ширины 400 пикселей в вашем документе. Другие svgs могут извлечь выгоду из нового viewBox, полученного из объявленной ширины и высоты (это часто те же номера). Другие браузеры могут извлечь выгоду из различных настроек svg.

img / logo.формат SVG .

Эта настройка работает для меня.

я столкнулся с проблемой, когда iOS на iPad не будет правильно изменять размер SVG-изображений в <object> тег.

стиль CSS увеличит или уменьшит размер <object> контейнер, но изображение внутри него не будет изменено (на iPad, iOS 7).

изображения SVG были экспортированы из Adobe Illustrator, и решение оказалось заменяющим ширину и высоту в этом:

мне нужно использовать <object> , потому что <img> тег в настоящее время не поддерживает встраивание растровых изображений в SVG.

установить отсутствующие панели viewBox и заполните значения высоты и ширины заданных атрибутов высоты и высоты в теге svg

затем масштабировать изображение просто установка высоты и ширины до необходимый процентов значения. Удача.

вы можете установить фиксированное соотношение сторон с preserveAspectRatio http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="10%" height="10%" preserveAspectRatio="x200Y200 meet" viewBox="0 0 350 350" version="1.1" inkscape:version="0.48.0 r9654" sodipodi:docname="namesvg.svg">

просто используйте CSS, чтобы браузер изменил размер SVG! Вот так: <object style="width:30%"> Вижу http://www.vlado-do.de/svg_test/ для более подробной информации. Я просто также попробовал его локально с SVG, который имеет свою ширину и высоту, заданную в "pt". Он хорошо работает в Firefox.

давайте посмотрим. Мне пришлось освежить память на SVG, я не использовал его много лет.

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

Если, как указано, вы не укажете размер SVG в процентах или не укажете viewBox (например. viewBox= " 0 0 600 500").

теперь, если у вас нет возможности изменить экспортированный SVG, вам не повезло, я боюсь. Какую библиотеку вы используете?

вот решение PHP с использованием QueryPath на основе ответа Джима Келлера.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *