Home/ Questions/Q 430395
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T19:52:17+00:00

I want to Embed SVG into XUL. I tried to use the this tutorial

  • 0

I want to Embed SVG into XUL. I tried to use the this tutorial which requires pasting of the SVG code in XUL application and it works but this is not clean. I want to keep SVG and XUL files separate, further I will like to use a separate CSS file for SVG part, any examples how we can do this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use xul-overlays:

    1) Declare the overlay at the top of your xul file:

    <?xul-overlay href="africa.svg"?>

    2) Define an empty container svg element inside your xul file and assign the same id to it as to the main svg element in the included file.

    <box>
  <svg:svg id="mapa" />
</box>

    3) Remember to use a separate namespace for the svg part (see svg:svg above) and declare it.

    <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:svg="http://www.w3.org/2000/svg">

    4) Make your svg file an overlay by putting an overlay declaration all around (I’m afraid you have to do this).

    <overlay xmlns="http://www.w3.org/2000/svg">
 <svg id="mapa">
  ...
</overlay>

    About separate css files: Just create two of them and include them wherever you want – even in the svg overlay.

    You might want to look inside a working example – a small geography quiz which I created years ago and just updated yesterday to make it work again in current firefoxes:

    http://open-projects.net/~nico/countryquiz/

    Just look at the source files!

    • 0