Affinity Suite: Analysis of SVG file design

[Pyanepsion]

v2.3.1.2217

Hello everyone,

I initially had a suggestion for improvement in mind. However, I'm now convinced that it was more of a design error. In Affinity Publisher it was originally a text box containing a letter and three coloured backgrounds, as well as a rectangle measuring 7 × 84 pixels, embedded in an area measuring 320 × 84 pixels.

During the process in Affinity, numerous nested groups were created, and all the objects were initially provided in reduced size, and then successively moved and enlarged horizontally and vertically. For example, our vertical rectangle now measures 18.243 × 184.069 pixels before being reduced by a subsequent transformation. There is even an unnecessary group.

After optimizing 48 similar files, I saw an average reduction in size of at least 40% per file, accompanied by a significant reduction in the processing time needed to perform unnecessary calculations.

Longer text span, Use hex colors (and here Add line breaks for explanations).

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="427px" height="112px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1.33333,0,0,1.33333,0,0)">
        <g transform="matrix(0.383705,0,0,0.45635,0,0)">
            <rect x="0" y="0" width="18.243" height="184.069" style="fill:#509e2f;"/>
        </g>
        <g transform="matrix(1,0,0,0.466667,0,0)">
            <g transform="matrix(1,0,0,2.14286,0,0)">
                <rect x="80.549" y="35.619" width="1.667" height="6.703" style="fill:#509e2f;"/>
                <rect x="272.484" y="35.619" width="1.667" height="6.703" style="fill:#509e2f;"/>
                <rect x="13.837" y="41.815" width="1.667" height="6.703" style="fill:#509e2f;"/>
            </g>
            <g transform="matrix(1,0,0,2.14286,0,0)">
                <text x="10.5px" y="41.051px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:6px;">In hac habitasse platea : «</text>
                <text x="82.216px" y="41.051px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:6px;">Mauris rutrum enim vitae, Mauris ?</text>
                <text x="175.775px" y="41.051px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:6px;fill:#509e2f;">C</text>
                <text x="180.108px" y="41.051px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:6px;">’ed pretium ante sit amet elit tellus. » Ut viverra :</text>
                <g transform="matrix(6,0,0,6,152.561,47.2471)">
                </g>
                <text x="10.5px" y="47.247px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:6px;">« Maecenas quis magna. Ut viverra nisl eu ipsum […]</text>
            </g>
        </g>
    </g>
</svg>

svg-optimized.svg

svg-optimized.afpub