SVG - export bug

Bo Lovenhjelm · January 18

Hi,

There is a bug that I've been waiting for to be solved by the Affinity Team but as of yet - no luck.
I'm using the version 2.3.1 of the Affinity Suite for MacOS.

When implementing a svg-file exported from any of the software in the suite into a HTML document I want to be able to control the svg file with CSS - eg stroke widths, colors, fills and so on. With svg files exported from any of the software form Affinity Suite this is not possible. The only thing I can control with CSS is the size.

The only "solution" I've found as of yet is to open the svg file in Adobe Illustrator and export it again with the box "Presentation mode" ticked and only THEN I'm finally able to control the svg file as intended.

I've attached 2 files exported from both Affinity Pulbisher and Adobe Illustrator
Also attached are screen shots with export settings from both softwares.

Just to be clear, a svg file exported from affinity software works on a web page but is not controllable with CSS.
Please fix this bug asap as I don't want to be forced to keep Illustrator just to be able to produce svg files that can be controlled with CSS.

affinity.svg illustrator.svg

Hangman · January 18

Hi @Bo Lovenhjelm,

11 hours ago, Bo Lovenhjelm said:

Just to be clear, a svg file exported from affinity software works on a web page but is not controllable with CSS.

This seems to work without issue using files exported directly from Affinity apps... This is your affinity.svg file styled using an external CSS stylesheet...

HTML
Change the path to your CSS file accordingly...

<!DOCTYPE html>
<html>

<head>
    <title>How to Style Affinity SVG Files</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/stylesheet.css" type="text/css">

</head>

<body>

    <svg width="500px" height="500px" viewBox="0 0 91 104" 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/">

        <g id="Stroke-37" transform="matrix(1,0,0,1,-910.33,-486.27)">
            <path d="M940.17,553.3L970.59,553.3L970.59,522.88L940.17,522.88L940.17,553.3ZM911.58,512.8L911.58,563.37L955.37,588.64L986.37,570.76L999.18,563.35L999.18,512.8L955.38,487.52L911.58,512.8ZM952.36,533.42L948.26,543.84M952.36,533.42L956.46,543.84M959.74,533.42L959.74,543.84M950,540.08L954.84,540.08M970.58,530.42L978,530.42M970.63,538.09L978,538.09M970.63,545.78L978,545.78M932.8,530.42L940.17,530.42M932.8,538.09L940.17,538.09M932.8,545.78L940.17,545.78M947.69,522.9L947.69,515.53M955.36,522.9L955.36,515.53M963.05,522.9L963.05,515.53M947.69,560.68L947.69,553.31M955.36,560.68L955.36,553.31M963.05,560.68L963.05,553.31" />

    <!--Disable inline style and control using CSS-->
        <!-- style="fill:none; fill-rule:nonzero; stroke:black; stroke-width:2.5px;" -->

        </g>
    </svg>
</body>
</html>

CSS

#Stroke-37 {
    fill: none;
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 1;
    fill-rule: evenodd;
    clip-rule: evenodd;
    stroke-linecap: round;
    stroke-linejoin: round;
}

v_kyr · January 18

That's no bug per se, but more a matter how the SVG code is generated and exported by the apps here. Aka if via ...

External CSS style sheets referenced from the current document (see Referencing external style sheets)
Internal CSS style sheets (i.e., style sheets embedded within the current document, such as within an SVG ‘style’ element)
Inline style (i.e., CSS property declarations within a ‘style’ attribute on a particular SVG element)

then, see therefor also in the "SVG Spec - Styling with CSS".

This MDN Web doc about "SVG Fills and Strokes" also shows ...

Quote

There are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVG you'll find around the web use inline CSS, but there are advantages and disadvantages associated with each type. ...

... example wise the possible differences here.

walt.farrell · January 18

11 hours ago, Bo Lovenhjelm said:

There is a bug that I've been waiting for to be solved by the Affinity Team but as of yet - no luck.
I'm using the version 2.3.1 of the Affinity Suite for MacOS.

When implementing a svg-file exported from any of the software in the suite into a HTML document

Affinity generates an SVG file, which you could load from an HTML page, or from a browser via File > Open.

It is not generating SVG code for you to directly embed into your own HTML code.

You may want what your illustrator.svg example shows, but that's just a snippet of SVG code, not a file like Affinity generates.

It's not a bug.

Hangman · January 18

1 hour ago, walt.farrell said:

It is not generating SVG code for you to directly embed into your own HTML code.

Though you can quite happily as per the screen recording...

v_kyr · January 18

2 hours ago, Hangman said:

Though you can quite happily as per the screen recording...

Of course one always can tweak the SVG code manually accordingly, but that seems not to be what the OP is after here. So instead of always having to manually tweaking SVG files and creating CSS files, the OP is probably more after some additional autogenerated SVG+CSS export solution. Thus instead of mentioning this as a BUG (which it definitely isn't here), the whole would be better a feature enhancement request for an additional SVG export option.

Hangman · January 18

2 minutes ago, v_kyr said:

Of course one always can tweak the SVG code manually accordingly, but that seems not to be what the OP is after here.

The only tweak here is commenting out the inline styles to allow for style adjustments via an external style sheet which I think is what the OP was suggesting isn’t possible…

I don’t think any software is going to generate an efficient SVG with CSS as there’s no way to know which CSS styles are needed more so as the CSS for the SVG is likely going to form part of a more comprehensive stylesheet…

Embed the SVG, comment out the inline styles and use the ID exported with the SVG for the external stylesheet and add the properties as required…

v_kyr · January 18

1 hour ago, Hangman said:

The only tweak here is commenting out the inline styles to allow for style adjustments via an external style sheet which I think is what the OP was suggesting isn’t possible…

Of course it's possible and common usage. Though the OP probably doesn't have any in-depth knowledge of SVG and all of its features and capabilities, probably also not in the context of CSS.

1 hour ago, Hangman said:

I don’t think any software is going to generate an efficient SVG with CSS as there’s no way to know which CSS styles are needed more so as the CSS for the SVG is likely going to form part of a more comprehensive stylesheet…

Well that's more a matter of dev structuring and careful module setup etc., as it's commonly done in/for huger webbased systems (like CMS software etc.). CSS supports style imports, CSS selectors (class, #id), has selector specificity and offers precompiled styles (via Less, Sass, and Scss) for component styles. - So if one want's to make use of these features, you thus define for your to be generated SVG code before appropriate selectors for CSS reusage. Then you can setup the whole to be generated in a modular and easy changable manner via CSS. - In our company we use such approaches on a daily basis for our distributed webbased apps & envolved (micro-)services.

Similar techniques and approaches are also used by common known commercial CMS systems and the like.

Bo Lovenhjelm · January 19

Hi everybody and thanx for all your replies
I appreciate all the tips on how to "fix" the svg code manually though I really don't need them as I've worked professionally as a frontend developer and graphic designer for two decades now and of course I know how to strip the svg code for styles in a text editor and then style them in my .scss file.

I also know how Affinity Suite works as I've been a beta tester of Affinity Publisher since before the first public release and well aware of how the software and generated file formats work. And - I love all affinity products and use them every day 🙂

The point of the matter is that I work as a frontend dev at a large company in Sweden which has an inhouse marketing department of about 25 people that have used Adobes products for a really long time and I have finally convinced them of trying Affinitys software out to see if they can replace Adobes products with Affinitys.

And yes, for all of us in the Affinity community the advantages of switching to Affininty Suite are obvious and many but for a large company, there are risks attached as they have produced many Indesign and Illustrator files over the years.

Now, the problem isn't that I can't solve using svg files in our CMS possible but that I do not control the creation of these files as I'm not the one creating them. As we have a CMS setup with content editors in 26 different countries this is not possible and all of them as well as the members of our marketing team have NO knowledge of css or html as it is not their job.

There are several hundreds of icons made in svg formate for print already and instead of me and all of the others opening up the svg files in a text editor, stripping them of the styles and then upload into the CMS for the CSS to work it's magic it would be nice if they, as they already can in illustrator, could just open the files in Affinity and export the svg "For Web" and the work would be done further convincing all of the excellence of Affinity and move forwards to make the software switch.

I apologize for making a bug report about this, though I really was hoping it was one, and agree with v_kyr that it should have been a feature request instead.

Final thought..
Wouldn't it be nice though, if one could open all these svg-files up in Affinity and batch export them "For Web" in one nice sweep?

Hangman · January 19

Hi @Bo Lovenhjelm,

Many thanks for the clarification, the update and the explanation of your use case, this makes a lot of sense...

I would agree with @v_kyr and perhaps post this in the Feedback and Suggestions forum as a feature request...

Bo Lovenhjelm · January 19

Feature request has been made.

I really hope that it get the same attention it caught here

Thanx everyone!

v_kyr · January 20

On 1/19/2024 at 8:58 AM, Bo Lovenhjelm said:

Now, the problem isn't that I can't solve using svg files in our CMS possible but that I do not control the creation of these files as I'm not the one creating them. As we have a CMS setup with content editors in 26 different countries this is not possible and all of them as well as the members of our marketing team have NO knowledge of css or html as it is not their job.

Well that's a/the common problem here for distributed content work. - If you are not the creator of the SVGs, but apperently do have always to deal afterwards with fixing them accordingly, I would setup some guide/howto with reusable example templates for the people, on how to create/build SVG files after some scheme/rules you need and share/communicate that with them. - This maybe could ease your job on how to get SVGs with appropriate needed layer/class IDs for afterwards better CSS managment handling inclusion.

SVG - export bug

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

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