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/
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:
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.
1 Like
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.
1 Like
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.
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.
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
Download link : https://www.doobox.co.uk/Distribution/ForumSharing/logo2.svg.zip
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.
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.
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.
You’re right, it is. It didn’t show up earlier, but it is now.
Cheers
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.