Newer
Older
labs / tiddlers / system / cheatsheet / $__Cheatsheet_Cheatsheet_Images_SVG.md

SVG can be copy/pasted straight into a Tiddler. You can then set the type to image/svg+xml.

Controlling Size

If you remove the root level width and height attributes from the SVG, but leave the viewBox then it becomes dynamically resizable, and will automatically fill its container.

You can then control the size using a <div> with a width style:

<div style="width:50px">{{$:/Cheatsheet/Cheatsheet/svg_example}}</div>

Produces:

{{$:/Cheatsheet/Cheatsheet/svg_example}}

Printing

Using a width of 185mm makes it fit nicely on a printed A4 portrait page.

Dark Theme

Some students do use the dark theme. Having an image with a white background can be a bit dazzling when everything else is dark.

There are two solution:

  • Don't set a background color at all. The image will use the page background which will be inherited from the theme.

  • If you do have black text that needs to be displayed over the background then you need to set the background to something that will have some contrast so that the text is visible. Setting the alpha channel to %50 opaque with a white background is a pretty good compromise --- black text is still clearly visible, but the contrast different will not be dazzling.

Compare the following (flip the dark/light themes).

White background:

No background:

Semi-opaque 50% white background:

The following is the SVG code for the semi-opaque versions:

<svg style="background:#FFFFFF7F" width=100px viewBox="0 0 50 50" ><circle cx="25" cy="25" fill="#006600" r="20" stroke="#000" stroke-width="2"/></svg>

Note the style attribute.