serif:id attribute added to exported SVG file

[adiush]

Hello there.

I'm facing problem with exported files from Affinity Designer. When I export svg files it has some

serif:id

attribute which is causing me problems. Here is the example:

How can I rip out these attributes? It's really annoying to remove them all. They are causing errors in React apps.

I would really appreciate some help ;)

Cheers folks

[v_kyr]

Hi,

in that short code extract "shapes0" doesn't look to have that serif ID attribute applied, so what operation did you performed on the other grouped shapes?

[adiush]

10 hours ago, v_kyr said:

Hi,

in that short code extract "shapes0" doesn't look to have that serif ID attribute applied, so what operation did you performed on the other grouped shapes?

Thanks for respond.

What do you mean by operations? I just simply move the pieces around until it fits my needs. Nothing special. 

[GarryP]

I’ve done a few quick tests but cannot find a way to generate these “serif:id” attributes.
(I also notice that you have two group elements – with ids “_4” and “_22” – which have no ‘content’, which seems a little odd but I’m not an SVG expert.)
Would you be able to share the original AFDESIGN document and the exported SVG file?

[Paul Mc]

I've just checked a few of my exports that I use with Blender and this is sprinkled throughout them. It hasn't caused me any problems though. This is a well-formed namespace:id so is valid XML. This means it should be read by any other software that reads XML and ignored as they are not likely to be interested in any data from that namespace. What kind of error message or problem are you seeing?

 

[walt.farrell]

15 hours ago, adiush said:

They are causing errors in React apps.

Perhaps the React apps have a bug? Have you tried reporting the problems to them?

[Pšenda]

15 hours ago, v_kyr said:

doesn't look to have that serif ID attribute applied, so what operation did you performed on the other grouped shapes?

Create Document, draw Rectangle:

Create Document as Artboard (set Create artboard in New Document), draw Rectangle:

 

Hmm 🤔

[stokerg]

Hi @adiush,

I've seen serif:id generated when layers happen to have the same name in Designer.  If you can attach your afdesign file that would be a big help  

[v_kyr]

24 minutes ago, stokerg said:

I've seen serif:id generated when layers happen to have the same name in Designer. 

Same layer names in the sense of what? - For certain things like simple default rects (Rectangle) etc. there usually aren't IDs generated, as far as no grouping is initiated.

[adiush]

Guys thank you so much for all that messages  I figured it out earlier today, and like @stokerg said, it was caused by duplicated layers names. I simply copied Artboard which I wanted to export and pasted it to the New File, ale strange attributes disappeared. Primary .afdesign project is a huuuge project with many Artboards so many layers had been duplicated. 

Also @walt.farrell at first I thought you might have some point, but then I realized that SVG is a web format file and it shouldn't have any unnecessary tags in it, especially ones with semicolons, so it's definitely not a React's bug, cause it was working fine except fact that the console was logging many errors. 

Anyway the problem solved, so we can close this topic  

Thanks again folks! Peace 

[walt.farrell]

37 minutes ago, adiush said:

but then I realized that SVG is a web format file and it shouldn't have any unnecessary tags in it, especially ones with semicolons

Tags with semicolons should be fine, if they're properly quoted. And as Paul Mc pointed out:

8 hours ago, Paul Mc said:

This is a well-formed namespace:id so is valid XML. This means it should be read by any other software that reads XML and ignored as they are not likely to be interested in any data from that namespace.

 

[v_kyr]

Yes in the XML context a serif:id="x" is a valid attribute, as are many custom ones other tools like Inkscape do use. - But those are nothing the SVG parsers of other third party tools know about, or do take into account at all. So there could be other third party SVG tools, that could stumble upon such custom attributes, if not bypassed during their SVG analysis.

 

[adiush]

those attrs are basically junk 🧐

[Pšenda]

16 minutes ago, adiush said:

those attrs are basically junk 🧐

Yes, but they are definitely not a error. So every properly functioning SVG/XML parser must be able to process them, and the application may not use them.

Edit: SVG file with namespace attribut serif:id can read and properly display each of my web browsers (Chrome, Edge, IE).

Edited September 15, 2020 by Pšenda

[v_kyr]

1 hour ago, Pšenda said:

Edit: SVG file with namespace attribut serif:id can read and properly display each of my web browsers (Chrome, Edge, IE).

Well as I often said, webbrowsers do have the best SVG engines around which are mostly conform to the whole standards. The problem is more what other third party tools use and expect here, so to say things like Affinity etc., which do just support a minimal subset of the whole SVG standard. - Since beside PDF, SVG is one of the other main common vector exchange formats used by a bunch of apps.

[sfriedberg]

7 hours ago, v_kyr said:

Yes in the XML context a serif:id="x" is a valid attribute, as are many custom ones other tools like Inkscape do use. - But those are nothing the SVG parsers of other third party tools know about, or do take into account at all. So there could be other third party SVG tools, that could stumble upon such custom attributes, if not bypassed during their SVG analysis.

 

May I wear my computer science hat?  Thank you.  Any remotely functional SVG parser will process named attributes of XML or SVG elements without any difficulty at all.  From a parsing point of view, there is nothing that distinguishes "serif:id" from "id" or "name" or "width" other than the presence of a namespace, and the parser does not need to understand anything about namespaces except the syntax of namespace_name colon.  And it is absolutely expected for any SVG parser to handle namespaces, at the syntactic level.

The problem comes after parsing, when the application tries to do something semantic, rather than syntactic, with the results.  As already clearly stated, a sensible XML or SVG consuming application will simply ignore attributes it does not understand (by virtue of being coded to do so).  This definitely includes attributes belonging to unknown namespaces.

So any SVG consuming application which chokes on the presence of  ' serif:id="value" ' in an element tag either has a fundamentally broken parser, or was written by someone without a basic understanding of what XML-based input (such as SVG) is allowed to contain.

If I may continue with some examples, this situation (choking on ' serif:id="value" ') is like an image processing program crashing when an input JPEG image contains an unexpected piece of metadata.  It is like an IFF/RIFF processing application crashing when the input file contains an unrecognized chunk type.  It is like a video player app crashing when an input QuickTime or WMV file contains an unexpected additional stream.  All of these can be considered container formats to some extent, and any application which processes them should simply ignore the presence of content in formats the application doesn't understand.

For SVG this applies not only to attributes, but tags (entire elements) as well.  The parsing is trivial.  The processing should be equally trivial:  ignore anything that's not understood.

[Pšenda]

So the conclusion is:

20 hours ago, walt.farrell said:

Perhaps the React apps have a bug? Have you tried reporting the problems to them?

 

However, the fact that the OP has so far managed to resolve the situation by layer rename does not mean that a similar problem will not occur again sometime in the future. Reporting an error and fixing it in React would solve it in principle.

[v_kyr]

4 hours ago, sfriedberg said:

... For SVG this applies not only to attributes, but tags (entire elements) as well.  The parsing is trivial.  The processing should be equally trivial:  ignore anything that's not understood.

Don't forget the right syntactical output generation (export), which is another crucial part here for overall handling.

[lacerto]

(...)

[Pšenda]

1 hour ago, Lagarto said:

the namespace declaring part might be truncated but if the namespace is not declared

Namespace "serif" is declared correctly:

[sfriedberg]

It is certainly true that a conforming document will declare namespaces.

[Nikita Karamov]

I don't quite understand how this namespace works. Querying http://www.serif.com/ doesn't return any XML namespace, rather a 302 to the Serif homepage. This makes editing Affinity-generated SVGs hard in JetBrains' family of IDEs since they cannot resolve the namespace normally.

PyCharm, for example:

[lacerto]

(...)

[sfriedberg]

Lagarto got here before I did.  Yeah, it's a URI, not a URL.  Identifier, not locator.  Serves as an ID, not a web address.

[v_kyr]

An easy to follow explanation about "XML Namespaces" and it's context can be found here when read top to bottom.