SVG rendered as a full black monolith while being white and red

[Ferdinando Traversa]

Hi, the attached svg is rendered as a full black monolith on Affinity Designer/Publisher, while it's rendered correctly on Chrome and in the Finder thumbnail. 

This problem is quite blocking and serious.

 

Affinity Designer rendering:

Chrome rendering:

Finder rendering:

Map_of_municipalities_of_Apulia_-_Italy.svg

[Wosven]

That's because the SVG use CSS styles inside. When you modify to apply the style to each group/path like classical SVG, it's readable by AD.

(And you understand that this map is a real mess. I don't know how it was generated, but it could be lighter with less nodes.)

Map_of_municipalities_of_Apulia_-_Italy_test.svg

[Ferdinando Traversa]

@Wosven Okay, thanks. Do you know why aren't CSS styles supported? This is anyway a missing feature.

(The map was found online and it's pretty handy :D)

[PaulEC]

8 minutes ago, Ferdinando Traversa said:

The map was found online

Always be wary of things you "find" on line! 😉

[Ferdinando Traversa]

@PaulEC The map is useful, easy to use and edit and based on official and accurate data. Isn't it Affinity Designer's fault if the app doesn't support CSS + SVG while browsers and viewers do?

Source: https://commons.wikimedia.org/wiki/File:Map_of_municipalities_of_Apulia_-_Italy.svg 

[PaulEC]

@Ferdinando Traversa I just meant that some of the things you pick up around the web can either be a bit dodgy or just not work very well. But something from wikicommons etc should be fine. I do agree that it would be nice if there was better support for svg in AD. Most of the svg files I use are much simpler than this one, it looks like a nightmare to edit! 🙁

[Wosven]

43 minutes ago, PaulEC said:

it looks like a nightmare to edit! 🙁

In fact, it was easier than I thought, there's only 9 lines of style to redistribute. Adding line breaks to make it more human readable was the longest  part

[Andreas CH]

Wenn man keinen Editor benutzen will, gibt es im Augenblick den Weg über das Programm "Inkscape".

1. Karte in Inkscape öffnen
2. auswählen und kopieren
3. In Affinity Designer wechseln und "Neu aus Zwischenablage" wählen. (Es fehlen dann nur die eingefärbten Flächen).

Übrigens ich verwende Inkscape auch zum Vektorisieren (in der Hoffnung, dass das auch noch in AD eingebaut wird).

[PaulEC]

If you want to get the map back in AD you can just select all the layers, make the fill transparent and the stroke black. If you make the stroke different on each group you can have thicker lines for the main outlines and thinner for the subdivisions. The main problem, as it's so complex, is selecting the areas to colour. Maybe not perfect, but OK if you just want to work in AD.

[Sean P]

Hi Ferdinando Traversa,

We don't currently support CSS styling within an SVG, however we do have an improvement logged with development to support this.

[Ferdinando Traversa]

Ok, thanks! @Sean P

[Andreas Scherer]

On 9/13/2021 at 1:02 PM, Sean P said:

We don't currently support CSS styling within an SVG

That seems to be not quite correct. At least in this situation, CSS styling works. AD just doesn't grok more tricky CSS that other apps (and W3C) accept.