"Invalid SVG file" only thrown if start root element not present in SVG file

[minademian]

This is using svgi in code. Using latest version 1.1.0.

test SVG file

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="-10 -10 178 178" height="177.523" width="155.932" xmlns="http://www.w3.org/2000/svg">
  <path d="M155.932 155.932V0H0v155.932h155.932z"/><path d="M150.83 150.83V5.101H5.101V150.83H150.83z" fill="#f90"/>
  <text>herpderp</text>
  <g>
    <path d="M140.823 111.783L44.368 14.077 15.108 44.15l96.456 97.705 29.259-30.071z"/><path d="M111.783 15.108l-97.706 96.456 30.072 29.259 97.706-96.455-30.072-29.26z"/>
  </g>
</svg>

1. Remove or change end root element

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="-10 -10 178 178" height="177.523" width="155.932" xmlns="http://www.w3.org/2000/svg">
  <path d="M155.932 155.932V0H0v155.932h155.932z"/><path d="M150.83 150.83V5.101H5.101V150.83H150.83z" fill="#f90"/>
  <text>herpderp</text>
  <g>
    <path d="M140.823 111.783L44.368 14.077 15.108 44.15l96.456 97.705 29.259-30.071z"/><path d="M111.783 15.108l-97.706 96.456 30.072 29.259 97.706-96.455-30.072-29.26z"/>
  </g>
</s>

Output at commandline

{ stats: 
   { totalNodes: 7,
     types: { svg: 1, path: 4, text: 1, g: 1 },
     categories: { containers: 2, shapes: 4, text: 1 } },
  nodes: 
   { type: 'svg',
     category: 'containers',
     properties: 
      { viewBox: '-10 -10 178 178',
        height: '177.523',
        width: '155.932',
        xmlns: 'http://www.w3.org/2000/svg' },
     children: [ [Object], [Object], [Object], [Object] ] } }

2. Remove or change start root element

<?xml version="1.0" encoding="UTF-8"?>

  <path d="M155.932 155.932V0H0v155.932h155.932z"/><path d="M150.83 150.83V5.101H5.101V150.83H150.83z" fill="#f90"/>
  <text>herpderp</text>
  <g>
    <path d="M140.823 111.783L44.368 14.077 15.108 44.15l96.456 97.705 29.259-30.071z"/><path d="M111.783 15.108l-97.706 96.456 30.072 29.259 97.706-96.455-30.072-29.26z"/>
  </g>
</s>

Output
couldnt find file Invalid SVG file

Should the initialization not fail if start or end root element don't exist or they don't match?

[Angelmmiguel]

Hello @minademian,

Thank you for your comment. The initial svg tag is required to define a SVG document fragment. Based on the SVG specification, SVG fragments can be embedded in a parent XML using the SVG namespace. However, every SVG fragment must has a svg tag as root.

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://example.org"
        xmlns:svg="http://www.w3.org/2000/svg">
   <!-- parent contents here -->
   <svg:svg width="4cm" height="8cm" version="1.1">
      <svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
   </svg:svg>
   <!-- ... -->
</parent>

I am not sure if this is a common usage of SVG. Actually, it will fail with the current configuration of the tool. Nevertheless, I want to investigate this structure because it seems browsers doesn't implement it. At least, for the inline SVG files.

Related to changing the close svg tag. It's better to close it because some linters may fail. In browsers is not a requirement because the current tag is closed when another one shows up. You have an example about unclosed tags in codepen.

I believe that the current approach is fine and it will fit with most of the use cases. But, I am going to add a close tag lint rule in #7.

[minademian]

thanks for your response @Angelmmiguel, I understand.

[Angelmmiguel]

Great! I have just added the end tag lint in the issue.

I am going to close this task. Please do not hesitate to open a new issue if you have other questions :)