css – How to properly size SVG backgrounds

Question:

I want to make a background image on svg , there will be different details inside the svg itself. The idea is that this whole design could be easily adjusted to fit all resolutions and screen sizes. With mobile devices, everything is clear, you will have to implement it in a slightly different way. I'm interested in exactly how to correctly implement width="" height="" of the svg itself and how to correctly fit viewBox="0 0 NN" to this whole construction. I know that you can nest svg svg …

In the first example, we have viewBox="0 0 600 300" like this. see second example

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 600 300">
<polygon 
points="60,25 140,25 160,60 80,60  " 
style="fill: yellow; fill-opacity:0.5; stroke: black;" />
<polygon points="50,147.5 87.5,120 122.5,147.5 110,190 65,190" 
style="fill: blue; fill-opacity:0.7; stroke: black; " />

<polyline stroke="red" stroke-width="3px" fill="black" 
  points=" 50,80 140,80 80,100 180,100 160,85 160,115 180,100" />
</svg>

But in the second example, viewBox="0 0 1200 700" and of course, it gives such a difference…

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1200 700">
<polygon 
points="60,25 140,25 160,60 80,60  " 
style="fill: yellow; fill-opacity:0.5; stroke: black;" />
<polygon points="50,147.5 87.5,120 122.5,147.5 110,190 65,190" 
style="fill: blue; fill-opacity:0.7; stroke: black; " />

<polyline stroke="red" stroke-width="3px" fill="black" 
  points=" 50,80 140,80 80,100 180,100 160,85 160,115 180,100" />
</svg>

If we open these two examples at the same time, we see that the pictures look different for us at the same screen size, how can we make them look the same and viewBox="0 0 NN" fit to the entire width of the screen?

I know that width="" height="" for svg can be set as a percentage. But viewBox="0 0 NN" can be implemented as a percentage, and how is it all competently and correctly implemented?

Answer:

  • Along the way, I got an example with a lot of nested svg/
  • Multiple use of svg objects using the use command, both for calling a group of objects, and for calling individual parts of a block.
  • An example of positioning objects inside nested svgs
<meta charset="utf-8">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1200 700">
<rect width="100%" height="100%" fill="greenyellow"  />
  <defs> 
  <desc> Прячем фигуры для дальнейшего многократного использования </desc>
  <g id="block">
  <polygon  id="poly"
  
points="60,25 140,25 160,60 80,60  " 
style="fill: yellow; fill-opacity:0.5; stroke: black;" />

<polygon id="pentagon" points="50,147.5 87.5,120 122.5,147.5 110,190 65,190" 
style="fill: blue; fill-opacity:0.7; stroke: black; " />

<polyline id="zigzag" stroke="red" stroke-width="3px" fill="black" 
  points=" 50,80 140,80 80,100 180,100 160,85 160,115 180,100" /> 
  </g>
  </defs>
  <svg   viewBox="0 0 600 300">
 <desc> Выводим блок фигур с новым viewBox </desc>  
  <use xlink:href="#block" />
</svg >
  <svg viewBox="-100 0 600 300" > 
   <desc> Выводим блок фигур с тем же viewBox но сдвигаем вправо на 100px </desc>  
   <use xlink:href="#block" />
  </svg>    
  
   <svg viewBox="-200 -150 600 300" > 
   <desc> Выводим блок фигур  сдвигаем вправо на 200px и опускаем вниз на 150px </desc> 
   <use xlink:href="#block" />
  </svg>
 <svg viewBox="-400 -150 600 300" > 
 <desc> Выводим только зигзаг  сдвигаем вправо на 400px и опускаем вниз на 150px </desc> 
   <use xlink:href="#zigzag" />
  </svg>  
  
  <svg viewBox="-400 140 600 300" > 
<desc> Выводим только пятиугольник  сдвигаем вправо на 400px и поднимаем на 150px </desc>   
  <use xlink:href="#pentagon" />
  </svg>
  
   <svg viewBox="0 -250 600 300" > 
    <desc> Выводим только Параллелограмм   опускаем на 250px </desc>  
   <use xlink:href="#poly" />
  </svg>
  
  </svg>
Post Views: 4
Scroll to Top