Page 1 of 1

Experimenting with single-file SVG symbols

PostPosted: 22 Jun 2016, 12:38
by JohnnyTH
Greetings,

I opened a new thread cause I didn't want to hijack the Vector Set symbols thread, which is currently used for new expansion sets.

What I want to discuss here is the possibility to create an archive of all the expansion set symbols in SVG but I would like to have the SVG xml code hand-tuned and optimized, stripping out all irrelevant stuff, and reusing code as much as possible to avoid duplicate code.

The most obvious thing to factorize are:
  • Paths for each symbol, which should not appear multiple times for C, U, R, M versions
  • Gradient data across multiple symbols, when possible

As a first step I would be fine to factorize only the path data, i.e. having one file for each expansion set. I did a first experiment with EMA by pushing everything in the <defs> block and dividing the file between common data and specific data (i.e. stuff that might be eventually shared across different symbols and stuff that specific to this symbol).

You can open the file in Chrome and access the various rarities this way:
file:///C:/path/to/file/EMA_with_layers2.svg#mythic
You can replace "mythic" with "common", "uncommon" and "rare", let me know if it works for you.

Current drawbacks:
1) The file is no longer editable in Inkscape, due to the hand modifications to the XML data
2) Compatibility issues? Modern browsers should support "#layer" anchors on SVG images (it requires internal CSS rendering), but making a script which renders the PNG files from the SVG should be trivial

Re: Experimenting with single-file SVG symbols

PostPosted: 23 Jun 2016, 07:23
by Goblin Hero
JohnnyTH wrote:I would like to have the SVG xml code hand-tuned and optimized, stripping out all irrelevant stuff, and reusing code as much as possible to avoid duplicate code.
What is the purpose of such like optimization?

Re: Experimenting with single-file SVG symbols

PostPosted: 23 Jun 2016, 19:29
by kudit
JohnnyTH wrote:Greetings,

Current drawbacks:
1) The file is no longer editable in Inkscape, due to the hand modifications to the XML data
2) Compatibility issues? Modern browsers should support "#layer" anchors on SVG images (it requires internal CSS rendering), but making a script which renders the PNG files from the SVG should be trivial
Is it just me or is the rare version the same as the uncommon version?

By the way, the #anchors work in Safari as well.