Svg viewBox attribute

Question

I am learning svg from my official docs, there is such a line. I don’t understand if it already has the width and height attribute, what is the point to point it again in viewBox="0 0 1500 1000" ? It says: “One pixel unit is defined as one user unit. Thus, the length of“ 5px ”is the same as the length of“ 5 ”in the official docs, so this viewBox has a width of 1500 pixels and 1000, which exceeds 300px and 200px. So , why does it determine the value of width and height in the first place?

  <svg width="300px" height="200px" version="1.1" viewBox="0 0 1500 1000" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> 

Answer 1

Width and height - how big <svg> . The ViewBox controls the display of its contents, so viewBox = "0 0 1500 1000" will reduce the content of the <svg> element by 5 times (1500/300 = 5 and 1000/200 = 5), and the content would be 1/5 of the size they would be without viewBox but <svg>

Imagine that you have an elastic surface and cut it into 4 equal parts. If you throw away 3 parts, you will have a surface that is 1/4 the size of the original surface. If you now stretch the surface and make it equal to the size of the original surface, then everything on the surface will be twice as large. Here's how the viewBox and width / height are related.

Answer 2

If you do not specify a viewport, all unit numbers in an element are considered pixels. (and SVG assumes 90 dpi or pixels per inch to convert from units such as cm to pixels.)

In the viewport, you can make unit numbers in elements meaning "custom units" and determines how these units are mapped to size. For simplicity, we consider only the x coordinates, that is, the ruler. Your viewport indicates that your ruler will have 1,500 units to match the width of the svg size by 200 pixels.

A linear element from 0 to 1500 (without a unit, that is, custom units) will stretch 200 pixels, as shown in the figure, that is, the width of the svg drawing.

(And since SVG scales without loss of resolution, pixels are really not significant in the real world when the user zooms in or out.)

Its coordinate transformation, kind.

I suggest you learn from a book such as "SVG Essentials," about $ 10, from which I freely quote this answer.

Answer 3

Default

 <svg width="300" height="200"> 

svg grid line is in pixels (all the shapes are in that svg is measured in pixels)

But you want to use your own units, you can use viewBox attr for this:

 <svg width="300" height="200" viewBox="0 0 1500 1000"> 

It means:

horizontal axis: 1500 (your block width) = 300px => 1 (your block width) = 300 / 1500px = 1 / 5px

vertical axis: 1000 (your height block) = 200px => 1 (your height block) = 200 / 1000px = 1 / 5px

• Now all forms in svg will scale:

the scale of their width is 1 / 5px (1/5 <1 => zoom out) compared to the beginning.

their heights also scale to 1 / 5px (1/5 <1 => zoom out) compared to the beginning