I have saved my vector logo as .SVG file from adobe illustrator. But when i upload it on my website it is pixelated. The size of the logo which i want on my logo is (125px by 125px) but i am unable to get a crisp logo on pc screenl. But on mobile it is very crisp.

The image attached is the header of my website.

Website header

  • 3
    The logo looks pretty crisp to me. What is the problem? – Wolff Apr 27 '18 at 8:40
  • 1
    The problem is probably in resolution of your screen. change it and then see the logo. – SZCZERZO KŁY Apr 27 '18 at 9:30
  • 1
    Wordpress doesn't natively allow the upload of SVGs. Are you using a third-party plugin or did you edit your functions.php manually to allow uploading SVGs into the WP media library? – Manly Apr 27 '18 at 14:15

WordPress can either be forced to accept SVG as a MIME type (undesirable approach - security issues) or a proper plugin can be used which both allows use of SVGs and sanitizes them - preventing code injection attacks and so on: one with a good reputation last time I was looking into this was Daryll Doyle’s SVG-Sanitizer.

Short of doing either of these, the SVG is being rasterized on the fly by WordPress upon initial upload, and so is easily pixelated based on in-browser scaling / zooming and other factors.

Also bear in mind that a pure vector SVG doesn't really have pixel dimensions - you can control the wrapper/container/div in which it's encased, and that can be sized per pixel or percentage, but a pure vector SVG graphic element is completely resolution independent and freely scalable - hence the S part of SVG.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.