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

Placing an SVG doesn't work neither in Designer nor in Publisher


Recommended Posts

Hello Serif team.

First of all, let me thank you for the amazing Affinity products that you've been making.

 

Now, I want to report a bug about placing an SVG file.

I try to place an SVG file into Designer and/or Publisher but it doesn't show up at all. I looks like a totally transparent object on the page.

But the Inskape, Xara Designer Pro and Google chrome browser applications can display the SVG (I've attached to this topic) without any problem.

Is it a bug?

 

Thanks,

Arlen.

1-plane.svg

Link to comment
Share on other sites

  • Staff

Hi Arlen,

Thanks for attaching the SVG file. 

If you place the SVG file and then double click on it, you'll see on the layer tab everything is there, just in the wrong location.  You can select all and drag it back onto the page or with it selected use the Transform panel and set the X and Y correndiants to get everything back on the page (X:547.1 px Y:650.7 px).

I've seen this happen before and know we have an issue logged, so i'll update the log and attach a copy of this file :) 

Link to comment
Share on other sites

I experienced the same thing with Affinity and Adobe when opened a svg exported from Photopea.
Developer of Photopea says:
"I think there is a bug in Photoshop and other programs, it does not support URI-embedded SVGs in the SVG. You could try to report it to them."

So I assume Arlen's svg might be a URI-embedded SVG.

Link to comment
Share on other sites

Open the SVG in Designer, look at the transform panel, the SVG graphics are there, they just have a negative Y: number, change the Y: value to 300px

Once you have it in Affinity Designer just export it out as an SVG again.

Oops didn't see your post @stokerg

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

Thanks to everyone for the clarification. It helped a little bit. I'll explain why "a little bit".

If Designer knows that the SVG object is going to be outside the page and totally invisible to the user, could Designer warn the user about this situation and suggest to move it onto the visible area of the page in this case? Now Designer feels a little bit user unfriendly :) Designer goes even further in being misleading for the user by displaying the empty surrounding rectangle on the empty page thus making the user think that this empty rectangle IS the real SVG object. Why Designer even draws this empty rectangle? ;) 

I've managed to place the SVG on the page and I discovered that the result is not a little bit the same as the original one. The "WRONG" one is from the Affinity Designer:

image.thumb.png.c0a1af1dd4737ffe70deb0db8fd59cab.png

 

Thanks again for the great Affinity products.
The Serif team builds wonderful professional grade products.
I believe, together we can make the Affinity products even better! :)

Thanks,
Arlen.

Link to comment
Share on other sites

36 minutes ago, PixelPest said:

Your SVG file contains masks for the gradient effect on the strokes (stretched rectangles) which AD can´t read/interpret obviously: 

It's not just the <mask>'s, it also doesn't support <radialGradient>'s. Affinity in the OP's case just knows to draw the <paths> everything else is ommited.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

25 minutes ago, v_kyr said:

It's not just the <mask>'s, it also doesn't support <radialGradient>'s.

Add <pattern> to the list of tags which are not supported. Quite a few, so SVG seems a bit unreliable.

------
Windows 10 | i5-8500 CPU | Intel UHD 630 Graphics | 32 GB RAM | Latest Retail and Beta versions of complete Affinity range installed

Link to comment
Share on other sites

I tried with this one ...

Quote

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="myGradient">
      <stop offset="10%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </radialGradient>
  </defs>
 
  <!-- using my gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

... in which case it isn't handled right. So it might be dependent on parsing third party generated SVG code.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

I tried with this one ...

This don´t seem a proper SVG file.

 

 

Quote

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   id="svg5804"
   viewBox="0 0 133.80357 23.434523"
   height="23.434523mm"
   width="133.80357mm">
  <defs
     id="defs5806">
    <linearGradient
       id="linearGradient6357">
      <stop
         id="stop6359"
         offset="0"
         style="stop-color:#ff0000;stop-opacity:1" />
      <stop
         id="stop6361"
         offset="1"
         style="stop-color:#ff0000;stop-opacity:0" />
    </linearGradient>
    <radialGradient
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,0.17514123,0,45.134014)"
       r="66.901787"
       fy="54.717262"
       fx="92.604164"
       cy="54.717262"
       cx="92.604164"
       id="radialGradient6363"
       xlink:href="#linearGradient6357" />
  </defs>
  <metadata
     id="metadata5809">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(-25.702377,-43.000001)"
     id="layer1">
    <ellipse
       ry="11.717261"
       rx="66.901787"
       cy="54.717262"
       cx="92.604164"
       id="path6355"
       style="opacity:1;fill:url(#radialGradient6363);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.23399997;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
  </g>
</svg>

 

Link to comment
Share on other sites

It highly depend on the SVG code it can parse/interpret and handle or not in this case. Thus I previously said it might also depend on the third party generated SVG code.

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

7 hours ago, PixelPest said:

This don´t seem a proper SVG file.

This SVG was generated by Inkscape with the plane SVG option. I'm very doubtful that this SVG is wrong because, as I stated before, any web browser, Xara and Inkscape can display this SVG correctly. Though, to state this SVG is incorrect we need to know whether it complies with the W3C specification or not.

9 hours ago, PixelPest said:

Your SVG file contains masks for the gradient effect on the strokes (stretched rectangles) which AD can´t read/interpret obviously:

Yes, it does. But the question is not about why it contains masks. It contains masks because SVG can legally contain masks. Why not? :) The question is why AD cannot properly parse it, execute and display while other applications can do it without a hassle. ;)

Link to comment
Share on other sites

9 minutes ago, Arlen Keshabyan said:

This SVG was generated by Inkscape with the plane SVG option. I'm very doubtful that this SVG is wrong because, as I stated before, any web browser, Xara and Inkscape can display this SVG correctly. Though, to state this SVG is incorrect we need to know whether it complies with the W3C specification or not.

Yes, it does. But the question is not about why it contains masks. It contains masks because SVG can legally contain masks. Why not? :) The question is why AD cannot properly parse it, execute and display while other applications can do it without a hassle. ;)

I was talking about the snippet v_kyr posted not your SVG which works just fine everywhere except AD - so I have the same question like you.

And another: Was it really made inside Inkscape or just  smuggled through this pipeline because of something? I ask because creating this kind of masks is tedious instead of drawing a stretched ellipse with a proper radial gradient.

Cheers

Link to comment
Share on other sites

16 minutes ago, Arlen Keshabyan said:

Though, to state this SVG is incorrect we need to know whether it complies with the W3C specification or not.

https://validator.w3.org/#validate_by_upload

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

30 minutes ago, PixelPest said:

I was talking about the snippet v_kyr posted not your SVG which works just fine everywhere except AD - so I have the same question like you.

Sorry for misunderstanding then :)

30 minutes ago, firstdefence said:

Yeah. It looks like the file is the correct SVG from the W3C standard perspective (except for one warning :))

 

Link to comment
Share on other sites

35 minutes ago, PixelPest said:

And another: Was it really made inside Inkscape or just  smuggled through this pipeline because of something? I ask because creating this kind of masks is tedious instead of drawing a stretched ellipse with a proper radial gradient.

It was created in Xara and exported to the SVG by Xara. Then it was successfully opened by Inkscape and then re-exported to plain SVG from Inkscape.

Link to comment
Share on other sites

It´s a super nested image - no vector data at all. Safari can display it, eazyDraw, Intaglio don´t. As Inkscape can´t handle these kind of encapsulated images either I´m more concerned about the file in general as to expect AD to handle it - I´m sorry.

nestedrasterImage.png.116ece0c26abd77116ff94a3f3598919.pngPainCode.png.4ed93322352d7402dd3bf8fb28497df0.png

Link to comment
Share on other sites

It's a smart object extracted form psd on Photopea.
So that should be nested layer structure of the psd I guess.
I may be able to use pdf export instead of svg.

Though if Affinity can read smart objects, this is an unnecessary step in the first place.

Link to comment
Share on other sites

1 hour ago, ashf said:

Though if Affinity can read smart objects, this is an unnecessary step in the first place.

It can't, except in a flattened/rasterized form.

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1

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.