Add a dedicated help page and document some common SVG edits.

[dominickng]

This adds some documentation for common transformations required to get Skiafy working.

[evanstade]

Thanks for the patch!

There are now two places with docs, help.html and here[1]. I think that's ok because this is help specific to skiafy, but I guess we should at least cross-reference.

As far as these new docs, I've never run into the problems addressed here. Are these things that SVGO doesn't simplify out? What was the SVG you were using that caused you to write these tips?

[1] https://chromium.googlesource.com/chromium/src/+/master/components/vector_icons/README.md

[dominickng]

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.

[evanstade]

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] svg/svgo#563