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

Designer vs Inkscape


Recommended Posts

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.

Designer_tWePj9WgvQ.png

inkscape_SSA1ArpzF2.png

Link to comment
Share on other sites

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

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

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.

Bildschirmfoto 2023-11-20 um 09.03.10.png

Pittsburgh.svg

Link to comment
Share on other sites


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

image.jpeg.78f80c78d0746ca39ddac3391dc531e8.jpeg

Thanks to DeepL.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Screenshot2023-11-20at20_28_00.thumb.png.50747d769da4ce06e2859c5decc83fb7.png

Passed to svg1.1

Pittsburgh-edited.svg

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

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.