Jump to content
avnic

SVG file gets displayed blurred on my website

Recommended Posts

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

screenshot-2021.02.16-20_15_22.jpg

2021-02-23.jpg

Share this post


Link to post
Share on other sites

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.


intel core i5,  16GB 128Gb ssd win10 Pro Huion new 1060plus.

philips 272p 2560x1440px on intel HD2500 onboard graphics

Razer Tartarus Chroma

Share this post


Link to post
Share on other sites

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 by avnic

Share this post


Link to post
Share on other sites

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.


☛ Affinity Designer 1.9.2 ◆ Affinity Photo 1.9.2 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

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 ...

svg_code.jpg.d3a3e0942050a27ca2cabbdf836eed7f.jpg

... 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.

 


☛ Affinity Designer 1.9.2 ◆ Affinity Photo 1.9.2 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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 ...

    beispiel.jpg.d517b91cae74ffe99c132cc8141a3603.jpg
     
  • 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.

☛ Affinity Designer 1.9.2 ◆ Affinity Photo 1.9.2 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

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...

2021-02-23 (2).png

Logo_Stempel_web_115px.svg

Share this post


Link to post
Share on other sites

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 ...

circles.jpg.f9e11660acf060c431031d95996b0c61.jpg

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!

circles2.jpg.964062198997b8d67e05381fb166789e.jpg


☛ Affinity Designer 1.9.2 ◆ Affinity Photo 1.9.2 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

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!!!

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.