skiafy
skiafy copied to clipboard
Add a dedicated help page and document some common SVG edits.
This adds some documentation for common transformations required to get Skiafy working.
Here's an example:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="a" d="M10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 Z M10,13.0368421 L13.09,15 L12.27,11.3 L15,8.81052632 L11.405,8.48947368 L10,5 L8.595,8.48947368 L5,8.81052632 L7.73,11.3 L6.91,15 L10,13.0368421 Z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<polygon points="0 0 20 0 20 20 0 20"/>
<use fill="#000000" xlink:href="#a"/>
</g>
</svg>
That comes out of SVGOMG as:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="a" d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0-4.963L13.09 15l-.82-3.7L15 8.81l-3.595-.32L10 5 8.595 8.49 5 8.81l2.73 2.49-.82 3.7L10 13.037z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h20v20H0z"/>
<use fill="#000" xlink:href="#a"/>
</g>
</svg>
And then Skiafys into:
CANVAS_DIMENSIONS, 20,
MOVE_TO, 0, 0,
R_H_LINE_TO, 20,
R_V_LINE_TO, 20,
H_LINE_TO, 0,
CLOSE,
END
Which is blank, essentially. Moving the <path> out of <defs> and into the <g>, and removing the <use> and moving the "fill" to the <path>, and removing the second <path> made it render correctly.
it looks like there's an open feature request for SVGO to fix this[1].
I find it kind of hard to follow the help.html as it's written. It's overly specific and the formatting does not make it easy to parse visually. I'd simplify to: "inline paths that are referenced with xlink:href" and "remove paths that fill the whole area such as <pre><path d="M0 0h20v20H0z"/></pre>"
(that pre is not part of the svg markup, it's just to make the svg markup stand out)
[1] https://github.com/svg/svgo/issues/563