Skip to main content
Skip table of contents

Core SVG: Added support of font-relative units for the font-size property of a text element

In previous iText 7 Core versions, the font-size attribute in SVG’s text element was in some specific cases being calculated incorrectly.

This happened because iText would alternatively use default behavior when font size-relative length units (such as em, rem, etc.) are used. However, in iText 7 Core version 7.1.14 the correct rendering of these values is supported.

Moreover, the conventional default behavior is applied to units 100% and 1em of font-size elements that do not have parents to relate to.

You can consult the following link for more information on SVG font-size documentation: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size.

Example input SVG:

Relative values support SVG test file:

XML
<svg xmlns="http://www.w3.org/2000/svg" 
          width="400" height="400" viewBox="0 0 400 400" font-size="1">
         <g id="parentElement" font-size="50">
               <text x="10" y="150" font-size="3em">Text</text>
         </g>
        <rect x="10" y="40" width="300" height="120" fill="none" stroke="black"/>
</svg>

Font size default behavior SVG test file:

Font size default behavior SVG test file:

XML
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="595pt" height="842pt" version="1.1">
                <text x="20" y="20" font-size="6">font-size 6</text>
                <text x="20" y="50" font-size="10">font-size 10</text>
                <text x="20" y="80">No font-size</text>
                <text x="20" y="110" font-size="12">font-size 12</text>
                <text x="20" y="140" style="font-size:16px">css font-size 16</text>
                <text x="20" y="170" font-size="24">font-size 24</text>
                <text x="20" y="200" font-size="24px">font-size 24px</text>
                <text x="20" y="230" font-size="24pt">font-size 24pt</text>
                <text x="20" y="260" font-size="-16">font-size -16</text>
                <text x="20" y="290" font-size="10%">font-size 10%</text>
                <text x="20" y="320" font-size="50%">font-size 50%</text>
                <text x="20" y="420" font-size="100%">font-size 100%</text>
                <text x="20" y="550" font-size="150%">font-size 150%</text>
                <text x="20" y="580" font-size="12pt">font-size 12pt</text>
                <text x="20" y="610" font-size="12px">font-size 12px</text>
                <text x="20" y="640" font-size="12">font-size 12<tspan font-size="2em">font-size 2em</tspan></text>
</svg>

The iText 7 Core code for generating the PDF from SVG remains the same:

JAVA

JAVA
public void convert(String svg, String output, PageSize size) throws IOException {
   try (PdfDocument doc = new PdfDocument(new PdfWriter(output, new WriterProperties().setCompressionLevel(0)))) {
       doc.addNewPage(size);
       ISvgConverterProperties properties = new SvgConverterProperties().setBaseUri(svg);
       SvgConverter.drawOnDocument(new FileInputStream(svg), doc, 1, properties);
   }
}

C#

C#
public virtual void Convert(String svg, String output, PageSize size) 
 {
           using (PdfDocument doc = new PdfDocument(new PdfWriter(output, new WriterProperties().SetCompressionLevel(0)))) 
           {
                doc.AddNewPage(size);
                  properties = new SvgConverterProperties().SetBaseUri(svg);
                SvgConverter.DrawOnDocument(new FileStream(svg, FileMode.Open, FileAccess.Read), doc, 1, properties);
            }
 }



JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.