F
F
frontendzzz2018-06-19 19:58:27
SVG
frontendzzz, 2018-06-19 19:58:27

How to resize svg icon in img.svg file?

How to resize svg icon in img.svg file?
Icon file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Andrej Sharapov, 2018-06-19
@Madeas

You can assign an id:
and in the styles to prescribe the dimensions:

#inst {
  width: 32px;
  height: 32px;
}

The same can be done if the image is nested, for example:
a svg {
}
 или 

img #inst {
}

A
Andrew, 2018-06-20
@KeySVG

If I make svg images for adaptive sites (i.e. for all))), then I assign the sizes of svg by classes. I write the class even if the image is used once in the project. In classes I designate width and height, for backgrounds background-size.
The undoubted advantage of this approach is that it is possible to redefine the sizes of svg images in media queries for different display resolutions.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question