There is a picture in svg, see example1 example1

but in chrome and firefox it is displayed in a very small size, see example 2 example2

Embedded code:

.singl_in::after { content: ''; width: 19px; height: 24px; display: block; border: 1px solid #f00; background: url('i/icon-svg/icon-singl-in.svg') no-repeat top left; background-size: contain; } 
 <div class="singl_in">Singl in <img width="19" height="24" src="i/icon-svg/icon-singl-in.svg" alt=""></div>

As you can see, I inserted a picture through the img tag and through the background property. Set the background-size: 19px 24px; did not help.

The code for the svg image itself:

 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 252 144" style="enable-background:new 0 0 252 144;" xml:space="preserve"> <g> <path d="M139.8,82.3l-7.6-3.8c-0.7-0.4-1.2-1.1-1.2-1.9v-2.7c0.2-0.2,0.4-0.5,0.6-0.8c1-1.4,1.8-3,2.4-4.6c1.1-0.5,1.9-1.6,1.9-2.9 v-3.2c0-0.8-0.3-1.5-0.8-2.1V56c0-0.4,0.2-3.1-1.7-5.2c-1.6-1.9-4.3-2.8-7.9-2.8c-3.6,0-6.3,0.9-7.9,2.8c-1.9,2.2-1.7,4.8-1.7,5.2 v4.3c-0.5,0.6-0.8,1.3-0.8,2.1v3.2c0,1,0.4,1.9,1.2,2.5c0.7,2.9,2.3,5.1,2.8,5.8v2.6c0,0.8-0.4,1.5-1.1,1.9l-7.1,3.9 c-2.3,1.3-3.8,3.7-3.8,6.3v2.6c0,3.8,12,4.8,18.4,4.8c6.4,0,18.4-1,18.4-4.8v-2.4C143.8,86,142.3,83.5,139.8,82.3L139.8,82.3z M139.8,82.3"/> </g> </svg>
Can this image be somehow converted in another way? I do not have the source code, they have already sent such an image.

  • and you, what is the actual size of the svg image needed on page 19x24? Write, correct the svg file and explain why this happens in your case. - Alexandr_TT
  • look, the singl_in block is in size (19x24), but the icon in it is much smaller, the block size is visible along the red border, I also want to make the image 19x24, but in fact it is smaller for some reason, I would be very grateful for your help - Teem
  • show the rest of css, besides what you have in question, since the surrounding blocks can also influence the scaling of the icon. The SVG file is already in the works, on the alteration And as I understand it, it is not necessary to add svg as background
  • well, let's increase the size proportionally so that it can be seen more clearly, now I'll take off the code - Teem
  • <div class="block"></div> <img width="150" height="189" src="i/icon-svg/icon-singl-in.svg" alt=""> - Teem

1 answer 1

 <svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19" height="24" viewBox="192 85 76 96" style="border:1px solid red"> <g transform="scale(1.85)"> <path d="M139.8,82.3l-7.6-3.8c-0.7-0.4-1.2-1.1-1.2-1.9v-2.7c0.2-0.2,0.4-0.5,0.6-0.8c1-1.4,1.8-3,2.4-4.6c1.1-0.5,1.9-1.6,1.9-2.9 v-3.2c0-0.8-0.3-1.5-0.8-2.1V56c0-0.4,0.2-3.1-1.7-5.2c-1.6-1.9-4.3-2.8-7.9-2.8c-3.6,0-6.3,0.9-7.9,2.8c-1.9,2.2-1.7,4.8-1.7,5.2 v4.3c-0.5,0.6-0.8,1.3-0.8,2.1v3.2c0,1,0.4,1.9,1.2,2.5c0.7,2.9,2.3,5.1,2.8,5.8v2.6c0,0.8-0.4,1.5-1.1,1.9l-7.1,3.9 c-2.3,1.3-3.8,3.7-3.8,6.3v2.6c0,3.8,12,4.8,18.4,4.8c6.4,0,18.4-1,18.4-4.8v-2.4C143.8,86,142.3,83.5,139.8,82.3L139.8,82.3z M139.8,82.3"/> </g> </svg>
Redone SVG file

Icon SVG is now the size of 19x24px
For this, added viewPort width="19" height="24"
Further, using viewBox="192 85 76 96" caused the icon to decrease in size, centered relative to the viewport - this is a red rectangle that was needed to adjust the SVG image.
When adding to HTML, remove the line from the header of the SVG file - style="border:1px solid red"

You can add the svg code in an inline way, i.e. wrap the svg in a container div and copy the code in HTML

Additional scaling is not required, the icon has been redesigned to fit your size.
If you are not satisfied with the inline way of adding svg, use the object tag

 <object type="image/svg+xml" data="icon-singl-in.svg" width="19" height="24" > Your browser does not support SVG </object>

Other ways to add SVG to HTML page

  • @Teem Look at the result and if you are satisfied with the decision, tick it off - Alexandr_TT
  • You set up the icon, it's great, but I still have a lot of these, I would like to understand the principle, how did you do it? Is it possible to manually adjust each value in the viewBox attribute? - Teem
  • @Teem so I sort of explained everything in the comments to my answer. There is no other way, if the icon was originally drawn. If you want to understand in detail how the icons are scaled, centered read this article on our website ru.stackoverflow.com/q/615562/28748 and still my work is worth nothing? - Alexandr_TT
  • excuse me for meticulousness, but I just clarify: We set the necessary values ​​in svg viewPort width = "19" height = "24" and then change the attribute values ​​viewBox = "192 85 76 96" by eye until we get the desired result, all right ? - Teem
  • @ true, but manually, at random, without understanding the principle of interaction between the viewport and viewBox in some cases is unlikely to work, read the article that you gave. This is interesting - to sort it out once and then act quickly and confidently - Alexandr_TT