Designer vs Inkscape

[itgeek8088]

I am using the latest version of Designer in trial period. I have tried the program on several svg files and have been very happy. That is until I tried it on a SVG map of Pittsburgh. I have attached a screen shot of the map opened in Designer and in Inkscape. Can you tell me why the designer version is so messed up? I really had high hopes for this program.

[firstdefence]

Looks like Affinity is filling open curves/paths. Can you upload the SVG for us to look at?

[itgeek8088]

Attached per request.

Pittsburgh.svg

[Andreas Scherer]

Obviously, AD (1.10.8 on MacOS Ventura 13.6.1 here) doesn't grok this styling:

.st3,.st4,.st5,.st6,.st7{fill:none;stroke:#000;stroke-width:.09449;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}

i.e., the comma-separated list of common style tags. If you fully expand the CSS instructions to

.st3{fill:none;stroke:#000;stroke-width:.09449;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.st4{fill:none;stroke:#000;stroke-width:.23622;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.st5{fill:none;stroke:#000;stroke-width:.28346;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.st6{fill:none;stroke:#000;stroke-width:.33071;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.st7{fill:none;stroke:#000;stroke-width:.37795;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}

then the map looks great in full detail.

Pittsburgh.svg

[Palatino]

The svg file is corrupt: Sorry! This document cannot be checked.

Rewritten with SVG Cleaner: OK

Pittsburgh_cleaned.svg

[Andreas Scherer]

The W3C CSS Validator reports the original SVG/CSS file as valid.

 

[Andreas Scherer]

2 hours ago, Palatino said:

The svg file is corrupt

I think the W3C server was temporarily too busy to service your request.

[Palatino]

Just tested again - red bar. Never mind. For SVG files that cause problems, a check with the validator is a good thing.

Boxy SVG and Coda can display the original file correctly, iDraw/Graphic cannot. The error is at least not exclusive to Affinity (if it is an error at all).

[Andreas Scherer]

29 minutes ago, Palatino said:

(if it is an error at all).

It is. Affinity acknowledges only limited CSS styling in SVG.

[Palatino]

48 minutes ago, Andreas Scherer said:

It is. Affinity acknowledges only limited CSS styling in SVG.

Oh yes, I've heard something like that before. 😇

[itgeek8088]

Andreas,

Your "rewrite" of the CSS Styling worked greak. THANK YOU. I am realitivity new at this. Where is the CSS styling and how do I access it? I would like to learn more. 

[Palatino]

Open the SVG file in an editor:

[Andreas Scherer]

45 minutes ago, itgeek8088 said:

Where is the CSS styling and how do I access it? I would like to learn more. 

SVG is a form of XML, so the file content is in "plain text", accessible with your favorite text editor (i.e. Vim).

CSS styling is defined in the

<style>...</style>

group at the start of the SVG file, just as @Palatino shows above. The problem in this particular SVG file is to detect the final styling of the various tags, due to the cascading (that's the 'C' in 'CSS'), i.e. overriding, definitions. The last value for stroke-width for a particular tag takes effect. (In the original SVG file, the stroke-width for, e.g., .st7 is overwritten several times.)

Most of what I learned about HTML, CSS, ..., XML, SVG came from the SelfHTML site (in German). However, there are tons of other sources for self-study.

[itgeek8088]

Andreas,

Thank you, Thank you, Thank you.

[itgeek8088]

Palatino,

Thank you also.

[firstdefence]

I selected the layers seen highlighted and removed the fill and changed the line stroke to 0.2px, job done.

Passed to svg1.1

Pittsburgh-edited.svg