Hi Tony,
If you open the eg: chevron-left
<https://tiddlywiki.com/#%24%3A%2Fcore%2Fimages%2Fchevron-left>, you'll
see, that it actually contains a "hand crafted" SVG file.
1st rule -> Remove the SVG overhead!
- It only contains the pure <svg> part.
- Most additional parameters are missing - eg:
- <?xml version="1.0" encoding="UTF-8"?> wrapper element
- the whole meta data block
Depending on the SVG editor software you use and how you save the file, an
SVG file can contain a lot of editor specific stuff, that is irrelevant for
TW.
The overhead can be significant, in terms of tiddler size and also
usability within TW.
2nd rule -> Use "outline" paths, so they can be filled!
If you inspect the chevron, you'll see, that it contains an outline path.
... The code would be smaller, if it would only contain 2 simple lines. ...
The advantage of the outline is, that we can use CSS fill style setting to
change the SVG color. eg:
The SVG has a class tc-image-chevron-left
which you can use to change the fill color.
.tc-image-chevron-left {
fill: green;
}
3rd rule --> Remove all "hardcoded" styling attributes, so they can be
defined using CSS!
The *important part *now is -- We have to remove every fill-attributes from
the paths. ... If it would be there, it would always win.
Apply tc-xxxxx class definitions instead, if you need to style icon
elements.
4th rule --> Use proper default values
If you start a TW SVG make sure you use:
- width="22pt" height="22pt"
- viewBox="0 0 128 128"
5th rule --> Use a proper SVG editor
Depending on the editor, SVG files can contain a lot of bloat. ... So make
sure, you have a save option similar to: Optimized SVG in InkScape.
You still have to remove some stuff manually, but the editor specific crap
is gone.
6th rule --> *Optimize *the SVG for size
You can use: https://jakearchibald.github.io/svgomg/ ... It has a lot of
parameters, you can play with, to optimize the image size, without loosing
quality.
7th rule --> Don't embed big JPGs or PNGs
- They only make your file big.
- If you must use them, ... don't cry, if it causes problems.
- For me big is >100 kByte <---- see k for kilo ... not M for Mega
!!!!
- Pixel images can be optimized too!
That's it for the beginning
have fun!
mario
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/ea30adc7-5165-42ba-82f3-4b98d3c80a7c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
