Experimenting with single-file SVG symbols
Discuss Card Scans and Other Artwork Here
Moderator: CCGHQ Admins
Experimenting with single-file SVG symbols
by JohnnyTH » 22 Jun 2016, 12:38
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:
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
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
- Attachments
-
EMA_with_layers2.zip
- sample multi layer svg file
- (1007 Bytes) Downloaded 476 times
Re: Experimenting with single-file SVG symbols
by Goblin Hero » 23 Jun 2016, 07:23
What is the purpose of such like optimization?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.
When you´re a goblin, you don´t have to step forward to be a hero -- everyone else just has to step back.
-
Goblin Hero - Site Admin
- Posts: 1996
- Joined: 23 Oct 2005, 09:37
- Location: Russia
- Has thanked: 231 times
- Been thanked: 353 times
Re: Experimenting with single-file SVG symbols
by kudit » 23 Jun 2016, 19:29
Is it just me or is the rare version the same as the uncommon version?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
By the way, the #anchors work in Safari as well.
Please give feedback on our card database at http://www.deckmaster.info
Send comments via PM here or info@deckmaster.info
Send comments via PM here or info@deckmaster.info
3 posts
• Page 1 of 1
Who is online
Users browsing this forum: No registered users and 23 guests