SVGs misbehaving

Mat

unread,

Jul 3, 2019, 6:34:11 AM7/3/19

to TiddlyWikiDev

This gives a little flash icon... but not if tiddler type is set to `image/svg+xml`

<svg class="tc-image-button" width="22pt" height="22pt" viewBox="0 0 24 24">
<g fill-rule="evenodd">
<path d="M8 24l2.674-9h-9.674l16-15-2.674 9h8.674l-15 15zm-1.586-11h6.912l-1.326 4 5.739-6h-6.065l1.304-4-6.564 6z"/>
</g>
</svg>

What is wrong?

It is overall tricky to do svg stuff - but doing it in TW is even trickier. For example, It is unclear how to make them display in the same way that core icons do and it takes a lot of ugly style hacking to get icons to "behave" (e.g "too big, off center, vertically too high up" etc). But even the core icons are not optimized/styled when displayed (example).

TonyM

unread,

Jul 3, 2019, 10:28:18 AM7/3/19

to TiddlyWikiDev

I can't agree more. Styling, Resizing, having the same size display if svg or png

The Internet doco is complex because svg can be, but add then tiddlywiki quirks and it drives me mad.

It is overall tricky to do svg stuff - but doing it in TW is even trickier. For example, It is unclear how to make them display in the same way that core icons do and it takes a lot of ugly style hacking to get icons to "behave" (e.g "too big, off center, vertically too high up" etc). But even the core icons are not optimized/styled when displayed (example).

Regards

Tony

Jeremy Ruston

unread,

Jul 3, 2019, 12:38:30 PM7/3/19

to TiddlyWikiDev

Hi Mat

This is another old favourite, I'm afraid.

There are two ways of using SVG: either one can embed an entire SVG document in an image tag, or one can directly insert an SVG element within the HTML output.

Using SVG images makes the images entirely independent from the page, while using embedded SVG elements allows the SVG to be styled with CSS.

The gotcha here is that SVG documents must start with an XML declaration <?xml version="1.0"?>; it won't be recognised as an SVG image without it.

Just to add that none of this is specific to TiddlyWiki, this is just how SVG works. The only "quirk" that is added by TiddlyWiki is the ability to generate SVGs through wikification.

Best wishes

Jeremy.

TonyM

unread,

Jul 3, 2019, 5:42:57 PM7/3/19

to TiddlyWikiDev

I think at a minimum we need to improve documentation how to use, resize and import SVG within TiddlyWiki.

A lot of this is already occurring in TiddlyWiki but the "how to" and standards is not exposed to users.