Как задать размер svg в css

Как через css сделать высоту и ширину SVG равной тому, что рисуется внутри (use => path)

у меня высота и ширина тега svg почему то 150h * 300w но иконка 19*19
Как через css сделать что-то типа этого:

я могу конечно для svg задать так но это не целесообразно у меня размеры svg разные
пример svg
Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 21 апр 2021 в 9:53
1,587 1 1 золотой знак 7 7 серебряных знаков 20 20 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

у меня высота и ширина тега svg почему то 150h * 300w но иконка 19*19

Так происходит, когда не задан viewBox и размеры SVG браузер не знает и выводит по умолчанию для SVG:

ширина 300px, высота 150px.

Проверьте свою вёрстку, здесь в иконке указан viewBox , в вашем приложении видимо не указан.

Ниже пример, где у вашей иконки есть viewBox= 0 0 19 19 Она обернута div, у которого width=»19px» height=»19px» В этом случае иконка будет иметь те же размеры, что и родительский блок.

Вы можете использовать её многократно, при этом перекрашивать, масштабировать, позиционировать иконку.

Обратите внимание на правило CSS

path

Это сделано, чтобы была возможность стилизации, после использования тега

 .wrapper < width:19px; height:19px; >path

Update

Как комментирует @Armen

вроде работает но создает другие проблемы wrapper не считается с размерами svg. как итог svg наежает на другой блок

Добавьте viewBox в , которые вторично вызывают иконки

 .container < >.wrapper < width:19px; height:19px; >path

Базовые трансформации

Все последующие преобразования суммируются в атрибуте преобразования элемента transform . Преобразования могут быть последовательно суммированы, разделителем выступает пробел.

Перемещения

Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определённым атрибутам. Для этого используется translate() .

svg width="40" height="50" style="background-color:#bff;"> rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> svg>

Пример генерирует прямоугольник, перемещённый в точку (30,40) вместо точки (0,0).

если второе значение не задано, то оно приравнивается 0.

Вращение

Вращение элементов — это достаточно типичная задача. Используйте rotate() для этого:

svg width="31" height="31"> rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> svg>

Данный пример показывает квадрат который повернули на 45 градусов. Значение для rotate() задаётся в градусах.

Смещение углов

Чтобы сделать ромб из нашего прямоугольника, доступны преобразования skewX () и skewY (). Каждый из них принимает угол, определяющий, насколько элемент будет искажён.

Масштабирование

scale() изменяем размер элемента. Он использует 2 параметра. Первый — это коэффициент масштабирования по оси Х, а второй — по оси Y. Коэффициенты выражают сжатие по отношению к оригинальному изображению. Например, 0.5 уменьшает на 50%. Если второй параметр отсутствует, то тогда он принимается равным первому.

Комплексные перемещения с matrix()

Все приведённые выше преобразования могут быть описаны с помощью матрицы перемещений 2×3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью matrix(a, b, c, d, e, f) , которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:

< x new C o o r d S y s = a x prev C o o r d S y s + c y prev C o o r d S y s + e y new C o o r d S y s = b x prev C o o r d S y s + d y prev C o o r d S y s + f \left< \beginx*<\mathrm > = a x*<\mathrm> + c y*<\mathrm> + e \ y*<\mathrm> = b x*<\mathrm> + d y*<\mathrm> + f \end \right.

См. конкретный пример документации SVG. Подробную информацию об этом свойстве можно найти в SVG Рекомендациях.

Эффекты на системе координат

В случае использования преобразований вы устанавливаете новую систему координат внутри элемента, к которому применяются изменения. Это означает, что единицы измерения которые вы определяете и его дочерние еи не будут соответствовать 1:1, но также будут искажены, повёрнуты, перемещены и смаштабированы в соответствии с преобразованиями.

svg width="100" height="100"> g transform="scale(2)"> rect width="50" height="50" /> g> svg>

В результата прямоугольник в примере выше будет 100x100px. Более интригующие эффекты возникают, когда вы используете такие атрибуты, как userSpaceOnUse .

Встраивание SVG в SVG

В отличие от HTML, SVG позволяет встраивать другие svg элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя viewBox , width и height внутреннего svg элемента.

svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> svg width="100" height="100" viewBox="0 0 50 50"> rect width="50" height="50" /> svg> svg>

На примере выше, так же как и на других примерах ранее, вы можете видеть такой же эффект увеличения изображения в два раза.

« Предыдущая статья
Следующая статья »

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 6 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как изменить размер svg

Очень часто, при написании и/или правке SVG кода, мы используем какие-либо IDE с редактором кода или онлайн-редакторы. Там удобно «на лету» просматривать и отлаживать код. Но, нужно быть внимательными, когда работаем такими инструментами.

Всё дело в том, как именно подключается SVG для предпросмотра в таких средах.

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

Идеальным вариантом, для предпросмотра SVG кода, было бы сохранение этого кода в файл *.svg, с последующим подключением через , , или background-image: url() , но. На практике, для сохранения быстродействия и возможности взаимодействия с элементами, измененный код отображается в теге , который встроен в HTML-документ. В чём же проблема?

HTML и XML, не смотря на внешнюю схожесть, всё же очень разные. И, следовательно, обрабатываются по-разному разными парсерами. Тут и возникает тот самый нюанс, ради которого столько букв.

Внешние svg-файлы и svg закодированная в Base64 разбираются XML-парсером, inline-svg попадает на разбор к парсеру HTML.

Как известно HTML лоялен к регистру не только тегов, но и атрибутов. Именно поэтому, написанный с ошибкой svg-код, легко пропускается и работает в предпросмотре. Но, будучи скопированным во внешний файл, с ним уже будет иметь дело более строгий XML-парсер, который такое безобразие не потерпит.

Внимательно относитесь к выбору редактора и средству предпросмотра. Запомните написание основных тегов и атрибутов и чаще сверяйтесь со справочниками. по возможности, проверьте код, сохранив его в отдельный файл и подключив через соответствующие теги.

Спасибо @MaximLensky за то, что мотивировал меня на изыскания.

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

Вам наверное нужно кроме увеличения размеров иконки, сделать её адаптивной.

Для этого убираем width=»17″ height=»17″ и оставляем только viewBox=»0 0 17 17″

А размеры иконки будем регулировать в процентах (для адаптивности) внутри команды

2# способ (главный и самый правильный)

размеры иконки регулируются с помощью процентов ширины и высоты.

Отслеживать
4,542 3 3 золотых знака 16 16 серебряных знаков 53 53 бронзовых знака
ответ дан 20 апр 2018 в 21:48
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

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