Jump to content
adiush

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

Share this post


Link to post
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.8.3 ◆ Affinity Photo 1.8.3 ◆ OSX El Capitan

Share this post


Link to post
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. 

Share this post


Link to post
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?

Share this post


Link to post
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?

 

Share this post


Link to post
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

Windows 10 Home, version 2004 (19041.388),
   Desktop: 16GB memory, Intel Core i7-6700K @ 4.00GHz, GeForce GTX 970
   Laptop:  8GB memory, Intel Core i7-3625QM @ 2.30GHz, Intel HD Graphics 4000 or NVIDIA GeForce GT 630M
Affinity Photo 1.8.5.703 and 1.9.0.734 Beta   / Affinity Designer 1.8.5.703 and 1.9.0.734 Beta  / Affinity Publisher 1.8.5.703 and 1.9.0.742 Beta.

Share this post


Link to post
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: Affinity Suite (ADe, APh, APu) 1.8.3.
Windows 10 Pro, Version 2004, Build 19041.388.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080.
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200.

Share this post


Link to post
Share on other sites

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 :) 

Share this post


Link to post
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.8.3 ◆ Affinity Photo 1.8.3 ◆ OSX El Capitan

Share this post


Link to post
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 

Share this post


Link to post
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

Windows 10 Home, version 2004 (19041.388),
   Desktop: 16GB memory, Intel Core i7-6700K @ 4.00GHz, GeForce GTX 970
   Laptop:  8GB memory, Intel Core i7-3625QM @ 2.30GHz, Intel HD Graphics 4000 or NVIDIA GeForce GT 630M
Affinity Photo 1.8.5.703 and 1.9.0.734 Beta   / Affinity Designer 1.8.5.703 and 1.9.0.734 Beta  / Affinity Publisher 1.8.5.703 and 1.9.0.742 Beta.

Share this post


Link to post
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.8.3 ◆ Affinity Photo 1.8.3 ◆ OSX El Capitan

Share this post


Link to post
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: Affinity Suite (ADe, APh, APu) 1.8.3.
Windows 10 Pro, Version 2004, Build 19041.388.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080.
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200.

Share this post


Link to post
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.8.3 ◆ Affinity Photo 1.8.3 ◆ OSX El Capitan

Share this post


Link to post
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.

Share this post


Link to post
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: Affinity Suite (ADe, APh, APu) 1.8.3.
Windows 10 Pro, Version 2004, Build 19041.388.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080.
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200.

Share this post


Link to post
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.8.3 ◆ Affinity Photo 1.8.3 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

I found this:

https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course

...and specifically:

Quote

"Note that it is an XML error to use a prefix that hasn't been bound to a namespace name. The binding created by the xmlns:xlink parameter in the example above is absolutely essential for the xlink:href parameter to not cause an error. This XLink parameter is also frequently used in SVG on the <a>, <use> and <image> elements among others, so it's a good idea to always include the XLink declaration in your documents."

So non-standard namespaces like "serif" should be declared first. In the code by OP the declaration part is not shown, and in the code example above by @Pšenda the namespace declaring part might be truncated but if the namespace is not declared, rendering this code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 303 148" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"  style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,-155.504,-83.4629)">
        <g id="Rects1" serif:id="Rects1">
            <rect x="155.504" y="116.954" width="71.07" height="84.264" style="fill:rgb(159,209,177);"/>
            <rect x="191.018" y="149.437" width="81.242" height="81.226" style="fill:rgb(249,238,121);"/>
        </g>
    </g>
</svg>

e.g. in Chrome or Firefox, causes this:

svgnamespace.jpg.df14a0b0e815d3f3097bc472bfdc9aa2.jpg

...so it is not just a question of assuming a robust parser. One cannot assume that custom namespaces can be used carelessly, just assuming that parser can handle (= ignore) what it does not recognize.

Adding the name space declaration xmlns:serif="http://www.serif.com/" in the code above within the svg tag fixes the problem:

svgrects.jpg.495b42781315ed250937045406307049.jpg

So there is point in checking that the namespace declaration is included in the code created by Affinity, e.g., if using directly the code pasted on the Clipboard. As I tested this both with Clipboard and digital export, the declaration was there, and in this case this is a React issue. If the declaration is not there, this is an Affinity issue.

UPDATE: If you use e.g. Designer simply to produce single objects in SVG code via Clipboard (or by extracting objects from an exported SVG file), you should make sure to manually add the Serif namespace declaration to avoid problems.

Share this post


Link to post
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: Affinity Suite (ADe, APh, APu) 1.8.3.
Windows 10 Pro, Version 2004, Build 19041.388.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080.
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200.

Share this post


Link to post
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

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | 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.