Jump to content
You must now use your email address to sign in [click for more info] ×

serif:id attribute added to exported SVG file


Recommended Posts

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:

1987187554_Zrzutekranu2020-09-14o20_45_38.png.bcebc874db6097bbf3eff2f74671c54c.png

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

Link to comment
Share on other sites

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?

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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?

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1

Link to comment
Share on other sites

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:
image.png.325c3da8c8ece8bd63897f27bf4676da.png
image.png.94a61c936a574e03ca6890e56620bd30.png

Create Document as Artboard (set Create artboard in New Document), draw Rectangle:
image.png.aa78c4d8882de719820362a7ca55b34e.pngimage.png.6be79f10ad3f64ec5064b679217cde18.png
 

Hmm 🤔

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

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.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

Guys thank you so much for all that messages :D 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 :D 

Thanks again folks! Peace 

Link to comment
Share on other sites

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.

 

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1

Link to comment
Share on other sites

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.

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

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 by Pšenda

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

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.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

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.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

1 hour ago, Lagarto said:

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

Namespace "serif" is declared correctly:
image.png.a1c4ce21b3ae05be9e0d784fceac73bf.png

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

  • 4 weeks later...

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:

image.png.ed0a875c3f1ecfc33bb4d8921b889163.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.