Added to TWScripts with some examples. On Wednesday, June 5, 2019 at 11:58:59 AM UTC+4:30, PMario wrote: > > 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/6edd871d-dad5-4535-89e7-8fb7516a5d11%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
