koldou Posted August 6, 2020 Share Posted August 6, 2020 When I exporta a file as SVG, when i try lo shot it in my web page, it does not show. To render it, I need to open the exported SVG in InkSacpe and export it from there. When i do this step, the SVG shows perfectly in my webPage Quote Link to comment Share on other sites More sharing options...
Paul Mc Posted August 6, 2020 Share Posted August 6, 2020 Can you provide more information? Does the console display any error messages? Which browser are you using to test this? Is there a public page we can see to analyse the contents? What are your export settings, can you provide a screen shot of that window? Quote Link to comment Share on other sites More sharing options...
koldou Posted August 6, 2020 Author Share Posted August 6, 2020 The console does not show any kind of message. I am using Firefox developer edition, but also tried on Edge. I do not have any public page, as it is still in development. The export options are the default ones, and have tried with all of them. When I export as png it works perfectly. I have also attached a file exported with Inkscape and another exported with Affinity Designer. InkScape.svg Affinity.svg Quote Link to comment Share on other sites More sharing options...
Paul Mc Posted August 6, 2020 Share Posted August 6, 2020 Will it be OK to create a small, temporary, public webpage with this content just for testing purposes? Quote Link to comment Share on other sites More sharing options...
Joachim_L Posted August 6, 2020 Share Posted August 6, 2020 Opened the Affinity.svg directly in Chrome, Firefox and Edge without any problem. I even wrote some HTML and opened this without a problem. Quote ------ 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 More sharing options...
Staff MEB Posted August 6, 2020 Staff Share Posted August 6, 2020 Hi koldou, Welcome to affinity Forums The Affinity.svg (online) file you attached above is opening fine for me in Firefox (macOS), Safari (macOS) and Microsoft Edge (Windows 10). Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
howdytom Posted August 6, 2020 Share Posted August 6, 2020 Yes, I am able to open the SVG file as well in Safari, Chrome and Firefox. Make sure to copy and paste the complete SVG code. Quote Link to comment Share on other sites More sharing options...
Paul Mc Posted August 6, 2020 Share Posted August 6, 2020 I've create html that opens these files correctly. I don't think there is any problem here other than a difference in the scale that the graphics are rendered at. Quote Link to comment Share on other sites More sharing options...
koldou Posted August 6, 2020 Author Share Posted August 6, 2020 I have tried as some of you said in a blank html, and it works. I was expecting Affinity file to have the dimensions of the canvas when I exported (45x45), as InkScape does. Also, i was trying to render the svg in a 2 small place so i was just seeing the background. Thanks for all the help Quote Link to comment Share on other sites More sharing options...
Joachim_L Posted August 6, 2020 Share Posted August 6, 2020 Exporting to SVG from AD results in this <svg width="100%" height="100%" viewBox="0 0 34 34" <svg width="34" height="34" viewBox="0 0 34 34" Using "34" instead of "100%" would result - using the img-tag - in the correct size on screen. I am not into this matter, so what is the correct way? Percentage or viewbox-size in px for width and height? Quote ------ 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 More sharing options...
Staff MEB Posted August 6, 2020 Staff Share Posted August 6, 2020 In the SVG Export dialog click the More button and untick Set viewBox, to export it the correct screen size (no width="100%" height="100%"). howdytom and Joachim_L 2 Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
koldou Posted August 6, 2020 Author Share Posted August 6, 2020 Ok thanks, just created an export profile with that settings Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.