CODEWITHSUNDEEP
svgfont-size
Hervé Girod
Hervé Girod

Reputation: 547

Meaning of font-size on SVG

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 Stackoverflow question. If I change the size from 0.05 to 0.0.5px, I have the same result, so I assume that the browser (in my case Edge or Firefox, or Chrome all have have the same result) consider no unit as pixel units.

It seems that the size of the font depend on the viewbox, because with the current svg file, I have the following result: Image with font size 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): image What's the algorithm to use with a (for example pixel-unit) font-size in SVG, relative to the viewbox?

Upvotes: 0

Views: 941

Answers (1)

ccprog
ccprog

Reputation: 21921

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.

Upvotes: 1

Related Questions