This repository was archived by the owner on Jun 26, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
This repository was archived by the owner on Jun 26, 2022. It is now read-only.
Reduce SVG size #2
Copy link
Copy link
Open
Description
For example this histogram is 13kB, while it could be 3kB (compressed via the first site i found):
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
Labels
No labels
