# SVG Image created using Affinity Designer or Affinity Photo?

**URL:** <https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449>\
**Category:** RapidWeaver Classic\
**Created:** [May 30, 2018, 6:03pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449 "2018-05-30T18:03:52Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [May 30, 2018, 6:03pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/1 "2018-05-30T18:03:52Z")

</div>

I’m trying to create a usable SVG image to work with DooBox’s SVG stack. I’ve gotten far enough to make it work in Safari and Chrome, but not FireFox. Does anyone have experience creating SVGs using Affinity so they will work with the DooBox SVG stack? Here’s my sample page:  
[https://kieffer.us/test2/](https://kieffer.us/test2/)

---

<div class="post-metadata">

**Author:** ![willwood](https://avatars.discourse-cdn.com/v4/letter/w/bc8723/32.png) [@willwood](https://forums.realmacsoftware.com/u/willwood)\
**Post date:** [May 30, 2018, 6:14pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/2 "2018-05-30T18:14:29Z")

</div>

You have some insecure calls in that website. The address to your SVG starts http:// and not https://. This is the reason the SVG is not loading for you:

 ![11](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/7/7cb9d0cf2cdeafcdf46cfa494297a8b054ffc732.png)

Affinity Designer is a perfect tool for creating SVGs. I’ve never encountered any problems with the SVG options in export persona and embedding the SVGs with a stack like [GraphicStack](https://stacks4stacks.com/graphicstack/).

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [May 30, 2018, 6:37pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/3 "2018-05-30T18:37:25Z")

</div>

This is not the main issue here.  
The call should indeed be to https, but the main issue is the output from Affinity in this particular svg.  
Looking that the svg source reveals that not of the the sizing info inside is consistent. The view box, and various total width and height attributes are conflicting (not possible for the browser to satisfy them all).

If you manually change some of the images attributes in Firefox, it does display regardless.

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [May 30, 2018, 6:38pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/4 "2018-05-30T18:38:14Z")

</div>

Thanks WIll. I’m not sure the https is the only problem since I tried the same on another site of mine that has https without any luck. I will work on the URLs and see what happens.

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [May 30, 2018, 6:42pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/5 "2018-05-30T18:42:16Z")

</div>

I’m trying different ways to create the SVG in Affinity. It may have something to do with the artboard setup in Affinity Designer. I’m trying a setup without the artboard.

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [May 30, 2018, 6:53pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/6 "2018-05-30T18:53:10Z")

</div>

Just to get you by, and for me to be sure it is your svg output at fault, try this one I just recreated in Illustrator.

View Link : [https://www.doobox.co.uk/Distribution/ForumSharing/logo2.svg](https://www.doobox.co.uk/Distribution/ForumSharing/logo2.svg)

Download link : [https://www.doobox.co.uk/Distribution/ForumSharing/logo2.svg.zip](https://www.doobox.co.uk/Distribution/ForumSharing/logo2.svg.zip)

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [May 30, 2018, 6:54pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/7 "2018-05-30T18:54:20Z")

</div>

That’s better. Updated the urls above with a new svg using a mask instead of a raster effect. Much cleaner.

Replaced the url of the svg in your live page with the url of the test svg I created (linked in post above). Tested your page in all browser, and the new svg works perfectly.

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [May 30, 2018, 7:20pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/8 "2018-05-30T19:20:02Z")

</div>

One of the things that would probably add to the issue with the svg you created, is the fact that still it contains real font. You should always convert any fonts in the image to outlines before exporting.

In illustrator the command is “create outlines” when the font is selected.

Not sure about Affinity designer, but I am sure it will have the option to to exactly the same thing.

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [May 31, 2018, 11:16am UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/9 "2018-05-31T11:16:47Z")

</div>

I found a solution that worked by changing the Affinity SVG export settings. That was to go to File \> Export \> SVG \> More and unchecking﻿ the option to set the﻿ viewBox﻿﻿. In the meantime, Gary (Doobox) updated his SVG Stack to work with all Affinity exported SVG images. Thanks to Gary and Will for helping get this figured out and working.

---

<div class="post-metadata">

**Author:** ![NeilUK](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/neiluk/32/23434_2.png) [@NeilUK](https://forums.realmacsoftware.com/u/NeilUK)\
**Post date:** [May 31, 2018, 12:43pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/10 "2018-05-31T12:43:30Z")

</div>

I’m not seeing any update in RW for the SVG stack.

@bruce Did you get an update notification?

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [May 31, 2018, 12:56pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/11 "2018-05-31T12:56:54Z")

</div>

It’s in the RW stacks updates.

 ![11%20AM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/8/802deb1790fd28fe7787d9beeab2f58d27d1c3ed.png)

---

<div class="post-metadata">

**Author:** ![NeilUK](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/neiluk/32/23434_2.png) [@NeilUK](https://forums.realmacsoftware.com/u/NeilUK)\
**Post date:** [May 31, 2018, 1:04pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/12 "2018-05-31T13:04:28Z")

</div>

You’re right, it is. It didn’t show up earlier, but it is now.

Cheers

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\
**Post date:** [June 30, 2018, 11:04pm UTC](https://forums.realmacsoftware.com/t/svg-image-created-using-affinity-designer-or-affinity-photo/20449/13 "2018-06-30T23:04:31Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
