avnic Posted February 23, 2021 Share Posted February 23, 2021 Hi, I created a logo in Affinity Designer and exported it as svg-file (SVG (digital - high quality) - 300 dpi). But when I insert it into my WordPress-Website (via Image Widget from Elementor) it gets displayed blurred (at least at the circle-lines on the left and right side). I asked the Elementor support and they answered that it seems the svg image has a set width height in it which might be causing the issue. But how can I export the svg-file without these set width and height? I am attaching a screenshot of the blurred logo and also a screenshot from my inspection with Chrome Dev. Tools (some parts are deleted from the code because the site is not online so far) Has anybody an idea what could solve my issue? Thanks very much in advance :-) Quote Link to comment Share on other sites More sharing options...
dutchshader Posted February 23, 2021 Share Posted February 23, 2021 Hello avnic, You could try this, select all layers and on export select selection without background. On export tap the more button and uncheck "set viewbox". btw. did you use any layer effects on the logo, they will rasterize on export. avnic 1 Quote intel core i5, 16GB 128Gb ssd win10 Pro Huion new 1060plus. philips 272p 2560x1440px on intel HD2500 onboard graphics Razer Tartarus Chroma Link to comment Share on other sites More sharing options...
avnic Posted February 23, 2021 Author Share Posted February 23, 2021 (edited) Hello dutchshader, Thank you so much for your very quick response and suggestions! I tried the modified export of the svg-file but unfortunately no change. And I also checked if there are any layer effects - but I have not used them and the layers are also not marked with the "fx"-sign. But it looks that the circle-lines are rasterized somehow, but I do not know why... If you have any other idea, you are very welcome. Edited February 23, 2021 by avnic Quote Link to comment Share on other sites More sharing options...
v_kyr Posted February 23, 2021 Share Posted February 23, 2021 Show us your files (attach them here, the Affinity and SVG generated one), so we can take a closer look on those and hopefully then might see what is causing this effect. avnic 1 Quote ☛ 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 More sharing options...
avnic Posted February 23, 2021 Author Share Posted February 23, 2021 Yes, you are welcome, thank you very much :-)! Logo_Stempel_web.svg Logo_Stempel_web.afdesign Quote Link to comment Share on other sites More sharing options...
v_kyr Posted February 23, 2021 Share Posted February 23, 2021 The Designer file is setup as "1080 px x 1080 px at 144 dpi", the exported SVG has too (width="1080px" height="1080px") and nothing is rasterized inside ... ... so it might be due to the WordPress Elementor smaller used resizing here, since the initial SVG is usually 1080 x 1080 px. If you know approximately the size of the Logo you need (in w x h px) for the website, what happens if you export the logo as that SVG size and then place it into your website, does it look then sharper and not pixelized? Also for a website and thus display/screen output (and so not printing via a printer or some print service) you usually wouldn't need a 300 dpi output at all. For common screen/display/monitor output 72- 96 dpi documents are usually used. However, since you use SVG vectors here you can define a fitting logo size as pixels in your SVG export, which matches what you need exactly for your website then. avnic 1 Quote ☛ 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 More sharing options...
avnic Posted February 23, 2021 Author Share Posted February 23, 2021 Hi, Thank you very much for your kind check! 🙂 Probably you found the problem, because the Elementor support also supposed that the set size of the svg file might be the problem. Yes, I know the size, it is 115x115 px on my website - but how can I export a svg-file in a special size? I have not found this setting in the Affinity Export menue? Also googled for this but not found. I thought vector can be scaled in any direction (encreasing and decreasing)? I used 300 dpi in my last export (a trial to sharpen the export). If you could leave me a hint how to export a special size for the svg file you would help me very much :-), thank you :-)! Quote Link to comment Share on other sites More sharing options...
v_kyr Posted February 23, 2021 Share Posted February 23, 2021 For an SVG export the Affinity export panel it doesn't give you a size setting like for bitmap file formats. Thus you have to go another way here. Either you can resize the whole document and let it adjust all so far drawn objects before exporting as SVG ... Or you create a new document and size that to your needed export sizes accordingly then (aka 115 x 115 px). Next you group everything (all layers) from your initial "Logo_stempel" together and copy/paste those over to the new document. On the new document scale down (resize) the pasted over group accordingly, so it fits this new documents overal setup size. Export this new created 115 x 115 px document as SVG then. avnic 1 Quote ☛ 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 More sharing options...
avnic Posted February 23, 2021 Author Share Posted February 23, 2021 Hey, great, thank you so much for taking time to support me! 🙂 I tried both of your suggested solutions. The resizing of the complete document worked in the intended way, the svg-file has the needed size of 115x115px. The second way to create the 115x115 px svg-file did not work somehow. When I scale down the group the logo get destroyed (screenshot attached). But the first way worked (svg attached :-)). Unfortunately also the exactly sized svg-file gets displayed blurred when I use it in the web. Maybe the circle-lines are too thin so that the Browser can not render it? It is strange somehow... Logo_Stempel_web_115px.svg Quote Link to comment Share on other sites More sharing options...
v_kyr Posted February 23, 2021 Share Posted February 23, 2021 Yes, the second sizing method seems to destroy the whole group drawing now in v1.9.0, which shouldn't be and is a bug here which possibly (or hopefully) is fixed in the actual beta versions so far. 1 hour ago, avnic said: Maybe the circle-lines are too thin so that the Browser can not render it? It is strange somehow... Yip, here you can see how things look in a webbrowser (Firefox) with your actual 5 px value versus 8 px circle stroke sizes ... You may want to increase the circle white stroke size, you can also do so directly within any text editor and then just save the edited SVG file! Quote <circle id="Außenkreis---weiß---2-5" serif:id="Außenkreis - weiß - 2,5" cx="540" cy="540" r="500" style="fill:none;stroke:rgb(235,235,235);stroke-width:8px;stroke-linecap:round;stroke-miterlimit:1.5;"/> ... <g id="Innenkreis---weiß---2-5" serif:id="Innenkreis - weiß - 2,5" transform="matrix(0.985714,0,0,0.985714,12.7143,12.7143)"> <circle cx="540" cy="540" r="350" style="fill:none;stroke:white;stroke-width:8px;stroke-linecap:round;stroke-miterlimit:1.5;"/> </g> Or if you would like to have the circles more pronounced give them a 10 px stroke! avnic 1 Quote ☛ 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 More sharing options...
avnic Posted February 24, 2021 Author Share Posted February 24, 2021 Yeah, this solved my issue :-), 8px looks very good! Great, thank you so much! I also learned a lot about svg-export in Affinity Designer - this should help also for the future! And I am calmed that the resizing of a group will get fixed and is not a mistake in my file! Once again THANK YOU, you helped me really a lot!!! Quote Link to comment Share on other sites More sharing options...
v_kyr Posted February 24, 2021 Share Posted February 24, 2021 You are welcome! - (Kein Problem, gern geschehen!) avnic 1 Quote ☛ 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 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.