Как создать svg определенного размера
Начал изучать svg и немного запутался.
Комбинируя параметры viewBox и viewport можно масштабировать картинку в несколько раз, но если мне просто нужно создать svg фиксированного размера, например конкретно 50 пикселей, то что нужно сделать?
Конечно сайты с иконками позволяют скачивать картинки разного размера, но хотелось бы самому уметь управлять размерами svg.
Кто-нибудь может помочь разобраться?
Ответы (1 шт):
если мне просто нужно создать svg фиксированного размера, например конкретно 50 пикселей, то что нужно сделать?
Если будете создавать SVG в векторном редакторе, то нужно выбрать размер документа
50x50pxи рисовать внутри ограничивающей документ рамки. Что будет выходить за границы документа, будет обрезано.В готовом SVG документе размеры изображения зависят от соотношения
viewport / viewBox = 1при равенстве размеров изображение выводится в том же масштабе, как нарисовано.
Допустим вы скачали иконку 24px
<svg fill="#000000" height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"/>
</svg>Вам нужно её увеличить в два раза viewport / viewBox = 2 в этом случае необходимо увеличить viewport в два раза width="48" height="48", при том же значении viewBox = "0 0 24 24"
<svg fill="#000000" height="48" width="48" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"/>
</svg>Более подробно о взаимодействии viewport и viewBox можно почитать здесь