This is another part2 article. I don't claim this is original or interesting material; mostly this article is for own reference.

Missing knowledge

  • g tag is for group
  • Just like XML, things go horribly wrong if you have mismatched tags.
  • Add DOCTYE header by hand if needed.
  • You can inline SVG elements, attach to the document with an IMG element, or an OBJECT element.
  • If you need to script the second two options, you need an extra documentElement lookup as its a separate document object.
  • when using viewBox, the numbers are size of the canvas that you have (in the SVG)

SVG optimisation points

Points to reduce file size, so they load faster, and to make the file easier to rebrand in future. There are similar articles 1 2 3 4

  • Read the XML yourself, rather than spitting it at the webbrowser.
  • Remove items that you don't seem to need, or are tagged as display=none.
  • Remove accidental <cntl- D> elements, which are identical to the next node in the file.
  • Pull out style items into element, especially if the tools have duplicated style attributes 100s of times.
  • Create defs.$name objects and <use $name> to vastly reduce duplication of tags.
  • CSS cheat sheet spec for SVG.
  • When SVG is made by image editing tools, strip random tags/ attributes, carefully.
  • Trim unnecessary numerical precision. The numbers are in *pixels*, so can be integers.
  • Multiple transforms can be applied in the same group tag, but also in the same attrib. The matrix transforms the best for this, but are harder for humans to edit. As with many graphics pipeline tools, the order of the transforms is very important (test this to see).
  • If hand editing, edit id attributes so they make sense to a human. This isn't really an optimisation, except on your time.

Some similar articles in images