Meaning of font-size on SVG-CodePudding

I have the following SVG file:

<svg height="1000.0" version="1.1" viewBox="0 0 5.0 5.0" width="1000" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
   <g>
      <g fill="none" stroke="none" />
      <g stroke-width="0.005" stroke="black">
         <g fill="black" font-family="Arial, sans-serif" font-size="0.05" stroke="none" text-anchor="start" transform="translate(0.0125 -0.025)">
            <text x="4.50" y="5.00">101°</text>
         </g>
         <line x1="0.00" x2="5.00" y1="5.00" y2="5.00" />
      </g>
      <g stroke-width="0.005" stroke="black">
         <g fill="black" font-family="Arial, sans-serif" font-size="0.05" stroke="none" text-anchor="start" transform="translate(0.025 0.00625)">
            <text x="-0.00" y="0.05">11°</text>
         </g>
         <line x1="0.00" x2="0.00" y1="5.00" y2="0.00" />
      </g>
   </g>
</svg>

The font size is 0.05, which is very small. The font-size attribute in svg refer to the font-size property CSS specification. There is no unit, so I looked in the following Now if I remove the viewbox, with this svg specification:

<svg height="1000.0" version="1.1" width="1000" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
   <g>
      <g fill="none" stroke="none" />
      <g stroke-width="0.005" stroke="black">
         <g fill="black" font-family="Arial, sans-serif" font-size="0.05" stroke="none" text-anchor="start" transform="translate(0.0125 -0.025)">
            <text x="4.50" y="5.00">101°</text>
         </g>
         <line x1="0.00" x2="5.00" y1="5.00" y2="5.00" />
      </g>
      <g stroke-width="0.005" stroke="black">
         <g fill="black" font-family="Arial, sans-serif" font-size="0.05px" stroke="none" text-anchor="start" transform="translate(0.025 0.00625)">
            <text x="-0.00" y="0.05">11°</text>
         </g>
         <line x1="0.00" x2="0.00" y1="5.00" y2="0.00" />
      </g>
   </g>
</svg>

I have the following result (so not visible font because too small): What's the algorithm to use with a (for example pixel-unit) font-size in SVG, relative to the viewbox?

CodePudding user response：

Numbers without units or with px units are called userspace coordinates/sizes. They are local to the coordinate system in use where the element is placed. A viewBox of 0 0 5 5 describes a drawing region that is 5 units both in width and height. A text that is a child element and has font-size: 0.05 is 1/100 of the viewBox height.

The userspace coordinate system has no units and is abstract in the sense that it has to be fitted in some space (the "viewport") before it is rendered. You can use units in the userspace context, but they need to be converted into unitless userspace numbers. (For px, trivially just delete the unit.)

Only afterwards, when you know the size of the viewport and how to fit the drawing region inside, you can compute real-world pixel (for a screen), or point (for printing), or centimeter (for a plotter) values.

If the <svg> element has a width and height of 1000px, the drawing region defined by the viewBox is rendered by multiplying the userspace units with a factor of 200px, so that it fills the element. In other words: what in terms of the coordinate system inside the viewBox is a length of 1, is 200px in regard to the rendered <svg> element. A text with a font size of 0.05 is rendered accordingly at a size of 0.05 * 200px = 10px.

If there is no viewBox attribute present, the factor is simply 1px. A userspace unit of 1 is rendered at 1px, a font size of 0.05 is rendered as 0.05px.