Skip to content

create svgo plugin to reduce file size further more #89

@axe312ger

Description

@axe312ger

SVGO does already a great job my minifying the result of primitive.

Rotated ellipses are output by primitive like this:

<ellipse cx="193" cy="143" fill="#441e0d" fill-opacity="0.501961" rx="41" ry="55"/>
<g transform="translate(152.621571 29.450687) rotate(272.983978) scale(14.437002 72.481412)">
  <ellipse cx="0" cy="0" fill="#ffb433" fill-opacity="0.501961" rx="1" ry="1"/>
</g>

While SVGO optimizes them to:

<g fill-opacity=".5" transform="translate(.6 .6) scale(1.17188)">
  <ellipse cx="193" cy="143" fill="#441e0d" rx="41" ry="55"/>
  <ellipse fill="#442010" rx="1" ry="1" transform="matrix(8.58762 -49.20482 40.32192 7.0373 194.7 138.8)"/>
</g>

There is no SVGO plugin yet which does reduce the precision of the matrix transform values.

A slight reduction might not harm our output at all while squeezing a few more bytes out of the file.

This should be a separate value from the svgo precision.

Reference SVG output

Primitive only, reformatted:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="187" version="1.1">
    <rect width="300" height="187" x="0" y="0" fill="#728d96"/>
    <g transform="scale(1.171875) translate(0.5 0.5)">
        <g transform="translate(152.621571 29.450687) rotate(272.983978) scale(14.437002 72.481412)">
            <ellipse cx="0" cy="0" fill="#ffb433" fill-opacity="0.501961" rx="1" ry="1"/>
        </g>
        <ellipse cx="193" cy="143" fill="#441e0d" fill-opacity="0.501961" rx="41" ry="55"/>
        <polygon fill="#fffacc" fill-opacity="0.501961" points="-16,140 178,136 59,175"/>
        <ellipse cx="214" cy="153" fill="#1d171c" fill-opacity="0.501961" rx="67" ry="12"/>
        <g transform="translate(75.252210 107.017801) rotate(358.449508) scale(107.341621 28.751537)">
            <ellipse cx="0" cy="0" fill="#2a7b96" fill-opacity="0.501961" rx="1" ry="1"/>
        </g>
        <g transform="translate(229.116868 107.779018) rotate(126.492013) scale(39.231272 21.501004)">
            <ellipse cx="0" cy="0" fill="#358aa6" fill-opacity="0.501961" rx="1" ry="1"/>
        </g>
        <ellipse cx="83" cy="62" fill="#7fb3d6" fill-opacity="0.501961" rx="253" ry="20"/>
        <g transform="translate(188.775422 111.992678) rotate(214.001902) scale(11.607972 27.554495)">
            <ellipse cx="0" cy="0" fill="#8a0000" fill-opacity="0.501961" rx="1" ry="1"/>
        </g>
    </g>
</svg>

Primitive + svgo reformatted:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="187">
    <defs/>
    <path fill="#728d96" d="M0 0h300v187H0z"/>
    <g fill-opacity=".5" transform="translate(.6 .6) scale(1.17188)">
        <ellipse cx="144" cy="30" fill="#ffba40" rx="70" ry="17"/>
        <ellipse fill="#442010" rx="1" ry="1" transform="matrix(8.58762 -49.20482 40.32192 7.0373 194.7 138.8)"/>
        <path fill="#fff6c7" d="M150.5 166.5H5.5v-29h145z"/>
        <ellipse fill="#217795" rx="1" ry="1" transform="matrix(1.16922 24.76311 -144.66103 6.83033 38.8 106.7)"/>
        <ellipse fill="#1d161a" rx="1" ry="1" transform="matrix(-76.48594 -5.06218 .92479 -13.97288 221.1 156.1)"/>
        <ellipse fill="#7ab2d7" rx="1" ry="1" transform="matrix(.96597 -19.75068 215.54079 10.5417 114.1 60)"/>
        <ellipse fill="#388ba4" rx="1" ry="1" transform="matrix(-31.23902 29.95715 -16.66446 -17.37754 234.7 108.2)"/>
        <ellipse cx="144" cy="29" fill="#ff9d54" rx="65" ry="14"/>
    </g>
</svg>

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions