Jump to content
Arlen Keshabyan

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
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" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo, Publisher Beta 1.7.0.140, Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials Instagram & Flickr - Affinity Live 19th June 2019

Share this post


Link to post
Share on other sites

I just opened Arlen's svg now.
And yeah, like firstdefence said, it's just caused by negative position.

Mine was totally different. there's no object at all.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Masks.jpeg.9391fb5bc6dfffd650b28c598cac8044.jpeg

Rebuilding via gradient filled ellipses is easy enough though.

Cheers

Share this post


Link to post
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.7.1 ◆ Affinity Photo 1.7.1 ◆ OSX El Capitan

Share this post


Link to post
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.

Share this post


Link to post
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.7.1 ◆ Affinity Photo 1.7.1 ◆ OSX El Capitan

Share this post


Link to post
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>

 

Share this post


Link to post
Share on other sites
4 minutes ago, v_kyr said:

Web browsers and SVG playgrounds can handle that ...

  •  

Your text snippet?

I made a radial gradient elsewhere that AD can read - that´s all I wanted to say.

Share this post


Link to post
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.7.1 ◆ Affinity Photo 1.7.1 ◆ OSX El Capitan

Share this post


Link to post
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. ;)

Share this post


Link to post
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

Share this post


Link to post
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" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo, Publisher Beta 1.7.0.140, Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials Instagram & Flickr - Affinity Live 19th June 2019

Share this post


Link to post
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 :))

 

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Windows 10 Home, version 1903 (18362.239), 16GB memory, Intel Core i7-6700K @ 4.00Gz, GeForce GTX 970
Affinity Photo 1.7.2.471 and 1.7.2.464 Beta   / Affinity Designer 1.7.2.471 and 1.7.2.4464 Beta  / Affinity Publisher 1.7.2.471 and 1.7.2.458 Beta

Share this post


Link to post
Share on other sites
4 hours ago, walt.farrell said:

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

I know, that's why Photopea is needed.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×