SVG Integration

Although SVGs have been usable in LiaScript for quite a while, their integration just got a lot tighter. In short: you can now mix SVG and LiaScript content directly, turning static vector graphics into living, clickable, even quiz-enabled experiences.

Quick refresher: What is SVG?

SVG stands for Scalable Vector Graphics. It’s an XML-based image format for describing two‑dimensional graphics (lines, shapes, text, etc.) that scale perfectly at any resolution. Because SVGs are text files, you can read and edit them, script them with JavaScript or CSS, and now—thanks to LiaScript—embed teaching elements right inside them.

👉 Official docs: https://developer.mozilla.org/docs/Web/SVG

Enter <foreignObject> …and LiaScript!

SVG has a special element called <foreignObject>. Traditionally, you use it to place arbitrary HTML inside an SVG. Now the LiaScript parser will look for `` blocks and interpret their contents as LiaScript. That means formulas, quizzes, code blocks, animations—anything you can do in LiaScript—can live right inside the graphic.

How it works

1. Write (or export) your SVG as usual.
2. Add a <foreignObject> element where you want interactive content.
3. Put LiaScript markup inside that element.
4. When LiaScript renders, the parser finds that block and executes it as LiaScript.

Example: A Circle With Embedded LiaScript

Tip: Pay attention to the x, y, width, and height attributes of <foreignObject>. They define the rectangle in SVG coordinates where your LiaScript block will appear.

What Can You Build?

The combination unlocks a whole new universe:

• Inline formulas rendered with LiaScript’s LaTeX support.
• Quizzes and polls overlaid on diagrams.
• Animated SVGs synchronized with explanations.
• Dynamic compositions via scripts that manipulate both SVG and LiaScript states.
• Interactive infographics and timelines without switching tools.

If you can picture it in SVG, you can likely make it interactive with LiaScript.

A Few Practical Notes

• Keep your SVG code tidy. Group related elements and comment generously.
• Test your coordinate system. viewBox makes scaling easier, but it also affects where your <foreignObject> shows up.
• Remember accessibility: provide titles/desc elements and consider keyboard navigability for embedded interactions.

Documentation

Checkout the new chapter in the documentation:

Or—as always—watch the video 😉

Learn More

• MDN SVG docs (specs, attributes, browser quirks): https://developer.mozilla.org/docs/Web/SVG
• LiaScript documentation: https://liascript.github.io
• SVG 2 specification (for the curious): https://www.w3.org/TR/SVG2/