0

In order to add a red background to the following SVG, I added a red rect:

<?xml version="1.0" encoding="UTF-8"?>
<ns0:svg xmlns:ns0="http://www.w3.org/2000/svg" xmlns:ns1="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:ns2="http://www.inkscape.org/namespaces/inkscape" xmlns:ns3="http://www.w3.org/1999/xlink" version="1.1" width="316.214" height="94.513" viewBox="-72 -72 237.16 70.885" ns1:docname="table-1.svg" ns2:version="1.1.2 (0a00cf5339, 2022-02-04)">
   <rect x="-72" y="-72" width="100%" height="100%" fill="red" />
</ns0:svg>

(where x and y mark the origin of the view.) This displays correctly in eog and Inkscape,

enter image description here

but Chrome and Firefox seem to ignore the <rect> and have a transparent background.

Any idea what's going wrong here?

Improve this question
4
  • 1
    ns0:svg is not a valid SVG element. Try using just <svg>
    – cloned
    Commented Aug 16, 2022 at 7:54
  • @cloned sure it is for an xml document. He will have to be consistent and write ns0:rect though
    – Robert Longson
    Commented Aug 16, 2022 at 8:45
  • If he wants it to be displayed in the browser he needs to create a valid SVG. So for that he needs to remove the typo ns0
    – cloned
    Commented Aug 16, 2022 at 8:50
  • @cloned No he doesn't. Look up custom xml namespaces.
    – Robert Longson
    Commented Aug 16, 2022 at 8:56

1 Answer 1

Reset to default
2

You're using custom namespaces so the svg namespace is ns0 for you. That's what the xmlns:ns0="http://www.w3.org/2000/svg" attribute does.

Therefore your rect element needs to be ns0:rect rather than just rect.

Alternatively you could say that your default namespace is svg by adding

xmlns="http://www.w3.org/2000/svg"

to the root element, then rect will just work as is.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.