Yes, these two recording forms will work without an error message, but only if the SVG code is embedded in HTML . But if the SVG code is saved in the *.svg file and run it, then an error message will be displayed:
In this case, the correct closing of the <rect tag will be - />
So why use the two forms of the closing tag entry?
The SVG syntax is a fairly strict tag writing system. In order of application, tags can be divided into three groups:
- Tags “chameleon” - depending on the context can be single or pair.
- Single tags
- Paired tags
1. Tags “chameleon” - depending on the context can be single or pair.
The single tag - <line ….. /> in the example below is working fine.
<line x1="5px" y1="100px" x2="200px" y2="50px" stroke="green"/>
Suppose you want to add an animation line. To do this, inside a single tag - <line ….. /> add a single animation tag - <animate attributeName=”x2″ ….. />
<line x1="5px" y1="100px" x2="200px" y2="50px" stroke="crimson"> <animate attributeName="x2" dur="4s" begin="1s" values="5;50;100;150;200; 800" repeatCount="indefinite" /> />
We get the error message:
Look carefully at the code above. A single animation tag is embedded in a single line tag. The XML parser does not understand this and prompts you to change the external single line tag to a pair </line> .
An example of proper tag closure </line>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" > <line x1="5px" y1="100px" x2="200px" y2="50px" stroke="crimson"> <animate attributeName="x2" dur="4s" begin="1s" values="5;50;100;150;200;800" repeatCount="indefinite" /> </line> </svg>
Conclusion - single tags of basic SVG shapes are replaced with paired tags if single animation tags are nested inside:
<animate … /> , <animateTransform … /> , <animateMotion … /> , <animateColor … /> , <set … />
This is true for all basic SVG shapes: <line … /> , <polyline … /> , <polygon … /> , <circle … /> , <ellipse … /> , <rect … /> , <path … /> and <use /> ;
2. Single tags.
In this section are tags that are always used, only as single. These are tags that implement the animation: <animate … /> <animateTransform … /> <animateMotion … /> <animateColor … /> <set … />
Animation tags are always used with the tags of the animation object. They can either be inside the tags of the animation object, or use the link, xlink:href=”#my-circle” to an external object, see the listing below.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" > <circle id="my-circle" r="30" cx="50" cy="50" fill="orange" /> <animate xlink:href="#my-circle" attributeName="cx" values="50;150;50" dur="2s" begin="0.5s" fill="freeze" repeatCount="indefinite" /> </svg>
In this example, the animation tag is outside the animation object, so the
<line ... /> object
<line ... /> animation object tag is closed as a single tag.
3. Paired tags
In this section are tags that are always applied, only as a pair. First of all, these are tags of container elements, which by definition can contain other graphic elements and other container elements as descendants.
<a> … </a>
<defs> … </defs>
<glyph> … </glyph>
<g> … </g>
<marker> … </marker>
<mask> … </mask>
<missing-glyph> … </missing-glyph>
<pattern> … </pattern>
<svg> … </svg>
<switch> … </switch>
<symbol> … </symbol>
There are a lot of tags in the SVG specification, it makes no sense to list all the paired tags.
Full list here .
