Skip to content
This repository was archived by the owner on Jun 26, 2022. It is now read-only.
This repository was archived by the owner on Jun 26, 2022. It is now read-only.

Reduce SVG size #2

@hhirtz

Description

@hhirtz

For example this histogram is 13kB, while it could be 3kB (compressed via the first site i found):

sample histogram

In fact, looking at the XML code, it does look very repetitive.

<svg width="1152" height="648" viewBox="0 0 1152 648" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="1151" height="647" opacity="1" fill="#FFFFFF" stroke="none"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="81" y1="582" x2="81" y2="4"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="113" y1="582" x2="113" y2="4"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="146" y1="582" x2="146" y2="4"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="179" y1="582" x2="179" y2="4"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="212" y1="582" x2="212" y2="4"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="244" y1="582" x2="244" y2="4"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="277" y1="582" x2="277" y2="4"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="310" y1="582" x2="310" y2="4"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="343" y1="582" x2="343" y2="4"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="376" y1="582" x2="376" y2="4"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="408" y1="582" x2="408" y2="4"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="441" y1="582" x2="441" y2="4"/>
<line opacity="0.1" stroke="#000000" stroke-width="1" x1="474" y1="582" x2="474" y2="4"/>
...

An example optimization is to make this line list a <path> instead (see also path commands):

<svg width="1152" height="648" viewBox="0 0 1152 648" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="1151" height="647" opacity="1" fill="#FFFFFF" stroke="none"/>
<path opacity="0.1" stroke="#000000" stroke-width="1" d="M81,582 V4 M113,582 V4 M146,582 V4 ..."/>

To enable this kind of optimizations, I suggest making SVGBackend work by appending SVG elements to an array, and only write to its output on DrawingBackend::present, so that this kind of pattern can be minified.

Willing to make a patch for this, what do you think?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions