I'm looking for a way to archive SVG's in wiki for Livecode. there are a few techniques to consider: 1. Use the html element to store the XML 1. Use the image-item to store data-uri 1. Use the asset plugin
Here we have an example of a fish created from a wiki page using Guide Tools.
I'm currently experimenting with the metadata we attatch to such Icons. This Fish was generated using an experimental generative ai package, and the prompt: > A poisonous tropical tiger or dragon fish with long beuatiful spiny quills.
One of the great things about svgs is the ease of adding rich metadata to the file, thereby preserving attribution for one.
# Html-item Here is an example of using the html element:
> Note: the image below can be produced by dropping it onto the about future plugin or via copy-paste. I am not sure how an svg element gets added to the image plugin?
# Data URL
The about image plugin uses a data URL to embed the svg in the json - like this:
"url": "data:image/svg+xml;base64,PHN...
Where: * `data:` → it’s inline data, not a file on the web * `image/svg+xml` → MIME type (SVG) * `base64` → the bytes are Base64-encoded * After the comma `,` comes the actual encoded payload (you didn’t include it)
# How to use Embed directly in HTML:
<img src="data:image/svg+xml;base64,AAA..."/>
or CSS:
background-image: url("data:image/svg+xml;base64,AAA...");
# How to decode
const dataUrl = "data:image/svg+xml;base64,AAA..."; const b64 = dataUrl.split(",")[1]; const svgText = new TextDecoder().decode(Uint8Array.from(atob(b64), c => c.charCodeAt(0)));
# Notes * Sometimes you’ll see `data:image/svg+xml;utf8,` (not Base64) with a URL-encoded SVG string instead. * Base64 makes data \~33% larger; handy for small icons, not large images. * Only use trusted SVG sources—SVG can contain scripts/styles that may be risky if untrusted.
# Assets
# See - New SVG Library