.svg file

[pburki]

Hello,

I have problems opening .svg files with Affinity Designer 2: the opened file does not correspond to the preview. This is the file opened with a browser:

This is the file opened in Affinity Designer 2:

Thanks

Philippe

[Arakel]

Would it be possible to upload the orignal svg file? 

[pburki]

Here it is

Thanks

Philippe

2022-11-30 Icon_V3.svg

[Arakel]

It seems to be a bug. The shape is there but not the fill. The fill is defined as a pattern and not applied to the shapes. All other tools and apps I use can display this file correctly except SVG See & Affinity. 

EDIT: by the way, Windows 10

 

Edited December 1, 2022 by Arakel
Add OS-Info

[Paul Mudditt]

This is how this opens in vectornator so a problem with the SVG file, I guess whatever fill was applied was not supported by SVG. Make sure you select rasterise unsupported features if it was exported from Designer.

[Arakel]

19 minutes ago, Paul Mudditt said:

This is how this opens in vectornator so a problem with the SVG file, I guess whatever fill was applied was not supported by SVG. Make sure you select rasterise unsupported features if it was exported from Designer.

As far as I understand, the file was generated by another application. It may even have been handwritten as source code.
Open the file with a text editor, the <style> block is correct. The pattern as far as I understand it too. Maybe the "fill: url(...)" is outside of the SVG specification, I'm not that deep into the topic. All the programs I've opened the file with display it correctly, just not SVG See and Affinity.

I guess Serif will take a look. 

[Paul Mudditt]

3 minutes ago, Arakel said:

As far as I understand, the file was generated by another application. It may even have been handwritten as source code.
Open the file with a text editor, the <style> block is correct. The pattern as far as I understand it too. Maybe the "fill: url(...)" is outside of the SVG specification, I'm not that deep into the topic. All the programs I've opened the file with display it correctly, just not SVG See and Affinity.

I guess Serif will take a look. 

Which programs (not browsers) were able to open the file “correctly”?

[Paul Mudditt]

Vector Q gave an error message on import, so again I state the SVG is invalid.

[Arakel]

4 minutes ago, Paul Mudditt said:

Which programs (not browsers) were able to open the file “correctly”?

Inkscape and PhotoLine does correctly. LibreOffice Draw showed the fill but with black as background. 

Edited December 1, 2022 by Arakel
typo

[Paul Mudditt]

Ok, eventually found an app that tries to open it, Amadine, but it doesn’t look like your image.

[Arakel]

It seems you don't believe me. 😏

I think the file is outside of the SVG standard, but if others can interpret the file correctly ...

[Paul Mudditt]

Hmmm shapes are there and a fill can be added

Original

<?xml version="1.0" encoding="UTF-8"?>

<svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1080 1080">

  <defs>

    <style>

      .cls-1 {

        fill: none;

      }

 

      .cls-2 {

        fill: #6d534d;

      }

 

      .cls-3 {

        fill: url(#Nuovo_campione_pattern_3);

      }

    </style>

    <pattern id="Nuovo_campione_pattern_3" data-name="Nuovo campione pattern 3" x="0" y="0" width="7.09" height="7.09" patternTransform="translate(-17.53 -9150.25) rotate(127.26) scale(2.83)" patternUnits="userSpaceOnUse" viewBox="0 0 7.09 7.09">

      <g>

        <rect class="cls-1" width="7.09" height="7.09"/>

        <circle class="cls-2" cx="-1.16" cy="3.54" r="1.98"/>

        <circle class="cls-2" cx="5.93" cy="3.54" r="1.98"/>

      </g>

    </pattern>

  </defs>

  <circle class="cls-3" cx="540" cy="363.7" r="270.37"/>

  <path class="cls-3" d="M684.85,634.95c-41.87,26.62-91.56,42.05-144.85,42.05s-102.98-15.43-144.85-42.05c-196.61,13.13-352.03,176.74-352.03,376.67v68.38h993.76v-68.38c0-199.94-155.42-363.55-352.03-376.67Z"/>

</svg>

 

Designer export with fill added

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

<svg width="100%" height="100%" viewBox="0 0 1080 1080" 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;">

    <circle cx="540" cy="363.7" r="270.37" style="fill:rgb(153,91,180);"/>

    <path d="M684.85,634.95C642.98,661.57 593.29,677 540,677C486.71,677 437.02,661.57 395.15,634.95C198.54,648.08 43.12,811.69 43.12,1011.62L43.12,1080L1036.88,1080L1036.88,1011.62C1036.88,811.68 881.46,648.07 684.85,634.95Z" style="fill:rgb(153,91,180);fill-rule:nonzero;"/>

</svg>

 

Ok, I’m no XML expert but I agree with you there is a problem with the software that created the  SVG. But perhaps a Dev will have time to look at this when the Op adds how they are creating the SVG.

[Paul Mudditt]

I was hoping the Op might respond, thank you for your comments.

[pburki]

I believe the file was created and exported from Adobe Illustrator, but will need to check with the graphic designer who created the file.

Thanks

Philippe

[Hangman]

The issue opening the file in Affinity Designer is that the SVG file uses Styles which are not currently supported in the Affinity Suite. The file itself references an Illustrator Pattern Swatch, fill: url(#Nuovo_campione_pattern_3);

Removing the Syle from the SVG file will allow you to see the basic shapes...

 

If the graphic designer who created it can provide the pattern itself ideally as a vector file, you could use it to create your own bitmap fill (depending on how and where the file is designed to be used) or create your own like in the quick attached sample...

Note: The bitmap pattern in the attached sample is only 72dpi but again depending on the end use for the file, could be a higher resolution.

2022-11-30 Icon_V3.svgDotty Man.afdesignDotty Man.svg

[Arakel]

This is strange, Serif Draw Plus X8 can do vector fills. (But opens this svg also with black fill)

@pburki If you need a scalable version, please find it attached.

2022-11-30 Icon_V3.afdesign

[Hangman]

You could equally just add the dot pattern as a vector clipping path instead of applying them as a bitmap fill...

Dotty Man v2.afdesignDotty Man v2.svg