Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create svgo plugin to reduce file size further more #89

Open
axe312ger opened this issue Jun 19, 2019 · 0 comments
Open

create svgo plugin to reduce file size further more #89

axe312ger opened this issue Jun 19, 2019 · 0 comments

Comments

@axe312ger
Copy link
Owner

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant