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
# 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