Affinity Suite: xmlns attribute incompatibility in SVG files

Pyanepsion · August 3, 2023

v2.2.0.1931

Dear Affinity Suite Team,

I would like to draw your attention to a problem with SVG files created by the Affinity Suite. The ’xmlns:serif="http://www.serif.com/"’ attribute in the ’<svg>’ root element is causing an error in HTML pages, affecting compatibility with web standards.

W3C:

Code:

<svg class="svg-logo-3rem" viewBox="0 0 2400 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">

Tools for correction:

Improved compatibility: Removing this problem would ensure better compliance with SVG standards, improving compatibility with different browsers and tools.
Reliability for developers: More and more developers are relying on Affinity Suite for their projects. Correcting this problem would increase the software’s reliability and efficiency in professional environments.
Product reputation: Prompt attention to this issue would positively reflect Affinity Suite’s commitment to quality and open standards.

Can you consider correcting or removing this attribute in a future update? No doubt it would be greatly appreciated by the developer community.

Thank you for your involvement,
Pyanepsion

Hangman · August 3, 2023

I'm not having any issues with SVG's used on websites created in Affinity apps using xmlns:serif="http://www.serif.com/"

Are you able to show the hidden text in the screengrab in full, i.e., the x... .serif.com
Are you happy to upload the SVG in question so we can take a look?
Which web creation app are you using with the SVG file in question?

This shows the France 24 Logo exported from Designer as an SVG and there are (for me at least) no issues embedding the SVG directly in the HTML. Depending on your objective you can also reference the SVG as an 'image' file as well which still maintains the file as a vector, to which you can apply various SVG filters e.g. the orange logos shown here...

walt.farrell · August 3, 2023

44 minutes ago, Pyanepsion said:

I would like to draw your attention to a problem with SVG files created by the Affinity Suite.

Are you pointing to the SVG fine from a website, or are you taking the text from the generated SVG file and embedding it directly in another file?

If you're embedding it, you will need to make some modifications to it, I think. The files are designed to be directly displayed.

Pyanepsion · August 3, 2023

The external SVG image doesn't seem to pose a problem.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Affichage du SVG</title>
</head>
<body>
    <img src="error-xmlns.svg" alt="Description de l'image SVG">
</body>
</html>

It does when the image is integrated.

https://validator.w3.org/nu/#textarea

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display of SVG</title>
</head>
<body>
    <svg width="100%" height="100%" viewBox="0 0 240 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
        <g transform="matrix(12,0,0,12,229.901,37.1104)"></g>
        <text x="20.599px" y="37.11px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:12px;fill:#101820;">Error xmlns:serif="http://www<tspan x="174.56px 177.894px " y="37.11px 37.11px ">.s</tspan>erif.com/</text>
    </svg>
</body>
</html>

And here's the SVG file. Remember to remove the two lines :

<?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">

error-xmlns.svg

Note:
The xmlns="http://www.w3.org/2000/svg" attribute does not generate an error, as it defines the correct and expected namespace for an SVG document. This is the standard declaration used to identify the version of the SVG language used in the document, and is required for the document to be correctly interpreted as SVG.

The URL "http://www.w3.org/2000/svg" is the unique identifier of the SVG namespace, as defined by the W3C (World Wide Web Consortium). This declaration informs the browser or any other tool processing the document that the document's elements and attributes must be interpreted according to the SVG 1.0 or 1.1 specification (depending on the version specified elsewhere in the document).

This is why this specific declaration is expected and accepted in an SVG document, whereas other xmlns attributes with unrecognized or unexpected URLs may generate errors or warnings.

Bryan Rieger · August 3, 2023

Every time I open an SVG exported from Affinity in an editor that uses DTDs it always flags the xmlns:serif on the svg element as having no declaration.

I also tend to run into issues with serif:id="{art board/layer name}" conflicting with actual ids of elements within the SVG doc. For example if a rect has an id="Artboard1" and Affinity then creates a group with the ns attribute serif:id="Artboard1" then the XML processor usually flags it. Both of these issues can also cause problems when trying to process SVG files using SVGOMG, usually resulting in a Load failed: SvgoParserError: <input>:5:41: Unbound namespace prefix: "serif" error.

Of course, these aren't issues that are going to impact most users, but it does make it very difficult to use Affinity generated SVG files in more complex XML based workflows where working with valid documents is essential.

Simply having a preference when exporting SVGs to omit (or include if you want an intelligent default) serif namespace tags would solve these problems.

Edit:
If you remove the xmlns:serif="http://www.serif.com/" from the SVG tag you also have to remove ALL of the serif:attributes on elements to avoid many applications (including Chrome, macOS Finder previews/Safari, etc) displaying only errors (ie: Namespace prefix serif for id on g is not defined).

Edited August 3, 2023 by Bryan Rieger
Further clarification on removing the serif namespace from SVG docs.

Pyanepsion · August 3, 2023

I also encountered problems with various Serif attributes in SVG files generated by the Affinity suite. The temporary solution was to remove them manually, which, although feasible, is far from optimal. The process is tedious and time-consuming.

I agree with you that this may seem a minor issue for those who don’t need to integrate these sources into more complex workflows. However, for those of us who depend on valid and compliant SVG documents, it is a significant obstacle.

Adding an option during export to omit (or include, as required) these specific namespace attributes would solve these problems. This would greatly facilitate the use of Affinity-generated SVG files in professional environments where standards compliance is crucial.

I urge you to consider this feature in a future update, as it would enhance the flexibility and efficiency of the Affinity suite for a wide range of users.

Hangman · August 3, 2023

What happens if you ignore the w3c.org Validation error, does it have any impact on the site itself?

v_kyr · August 3, 2023

1 hour ago, Pyanepsion said:

... It does when the image is integrated.

https://validator.w3.org/nu/#textarea

The related applying parts from the specs are here ...

W3C Validation

Though SVG viewers should just ignore those 'foreign' namespace content bits, the validator does not.

Further, SVG user agents must propagate and ignore unknown XML components from foreign namespaces:

5.11. Foreign namespaces and private data

SVG allows inclusion of elements from foreign namespaces anywhere within the SVG content. In general, the SVG user agent must include the unknown foreign-namespaced elements in the DOM but will ignore and exclude them for rendering purposes.

[...]

Additionally, SVG allows inclusion of attributes from foreign namespaces on any SVG element. The SVG user agent must include unknown attributes in the DOM but should otherwise ignore unknown attributes.

And finally xml:space is either way depricated ...

The ‘xml:space’ attribute

Pyanepsion · August 3, 2023

Hello, @Hangman,

I'd put it another way. Here are a few points to consider:

Impact on Rendering: The error apparently doesn't affect the way the page is rendered in current browsers. Its impact can be considered minor. However, this could change with future browser updates.
Maintenance and Future Development: Ignoring validation errors can make code more difficult to maintain or extend in the future, especially if other people are working on the code.
Compatibility: While the error may not affect modern browsers, it can cause problems in some older or less common browsers.
Good Practice and Professionalism: Following web standards is generally considered good practice and reflects a certain level of professionalism. Ignoring validation errors can give a bad impression to other developers or stakeholders.
Natural SEO: Although less likely with this particular error, some validation errors can potentially have an impact on a site's SEO. In our case, since we're dealing with resources, we encountered display errors with certain online tools.

In short, the actual impact of this error may depend on various factors such as the target audience, the browsers supported, and the specific needs of the site. It may be wise to correct the error even if it doesn't affect the experience of the majority of users or the site's objectives.

fde101 · August 3, 2023

The whole point of the namespace system is to allow for arbitrary 3rd-party extensibility, so Serif appears to be using this correctly. I don't believe there is an error here.

The problem is that the validators cannot find the DTD and thus cannot validate that the usage of the Serif namespace matches its intended usage.

The correct way to solve this would be for Serif to make a DTD for their namespace available for use by validators, not to eliminate it completely.

walt.farrell · August 3, 2023

In my previous research and experience, the namespace document does not have to exist, and frequently doesn't. It's just a tag used to ensure that names are properly scoped so they don't conflict with other definitions and usages within the document.

Here's one discussion, as an example: https://softwareengineering.stackexchange.com/questions/241424/why-do-xml-namespace-uris-use-the-http-scheme#:~:text=A XML namespace should be,those that are not URLs.

Pšenda · August 8, 2023

On 8/3/2023 at 2:02 PM, Pyanepsion said:

with SVG files created by the Affinity Suite.

My svg export is valid:

Pyanepsion · August 9, 2023

@Pšenda,

Superb. Which version of the Affinity suite did you use? Could you provide the source?

Pšenda · August 9, 2023

It was an image exported from APhoto. The mentioned xmlns:Serif is also included in the svg, but the validator doesn't mind.

walt.farrell · August 9, 2023

14 minutes ago, Pšenda said:

but the validator doesn't mind.

The validator should be happy with SVG files created by Affinity applications.

@Pyanepsion's issue, I believe, is the attempt to embed the text contents of one of the SVG fonts into another file without editing it to remove the extraneous information. The Affinity files are meant to be stand-alone, and displayed by a web page. Or, possibly, linked from another SVG file but not included directly in it.

Pyanepsion · August 9, 2023

34 minutes ago, Pšenda said:

It was an image exported from APhoto. The mentioned xmlns:Serif is also included in the svg, but the validator doesn't mind.

I confirm. A referenced image, i.e. one stored in a separate file and loaded by the src attribute of the <img> tag, poses no problem. It's when the source of this image is integrated into the source that we get a rather annoying error message.

More explanation in this message :

Affinity Suite: xmlns attribute incompatibility in SVG files

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

The related applying parts from the specs are here ...

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information