-
Notifications
You must be signed in to change notification settings - Fork 84
Open
Labels
Description
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>Spunkie