[ad_1]
I have an SVG logo and when I convert it to PNG or WEBP and upload it to the web, it loses a lot of its quality (no more sharp text lines). I cannot upload SVG. How can I generate and upload a PNG that is sharp with no loss of quality? I’m not using any image optimizer plugin. Thanks
[ad_2]
Adobe Illustrator or Inkscape. Export in high resolution to a transparent PNG. If it’s a true SVG, this shouldn’t be an issue.
If you’ve done this, and the high resolution image still looks blurry:
When you upload images to WordPress via Media, WordPress will create smaller versions of the image. Make sure you are using the “original” or “large” size.
Why can’t you upload SVG? Instead of trying to convert the logo to PNG or WebP, I’d figure out a way to upload SVG.
Download **[ASE](https://wordpress.org/plugins/admin-site-enhancements/)**, it let’s you upload SVG files.
But be advised that opening your site to SVG uploads also opens doors for others to upload malware files to your site.
If I were you, I’d enable the feature and onces done, disable it, just to be careful.
The short answer is usually that you haven’t saved the SVG at the right resolution for it’s size on the screen. There may also be issues with too-aggressive optimization.
SVGs by-definition look good at every resolution, but WordPress thumbnails use a pretty simple algorithm and browser image scaling algorithms aren’t using rocket science either. So if you save your SVG at, say, 2000px or even 780px but place it with a max-width of 150px the sharpness can get pretty messed up. If you save the image at (e.g.) 150px you should retain most of your sharpness.
Some “lossy” optimization algorithm settings that are great for photos can be too aggressive for line drawings like logos. If you have an automatic optimizer setup you may need to dial back on the settings. Though chances are uploading the right sized image for your logo will be sufficient.
PNG without loss of quality = large filesize.
Do what others have said and use SVG upload plugin.
SVG will look great at any size and load instantly at first paint.
You could also use Lottie which is just JSON vector format. There are a lot of SVG to Lottie free online convertors. Lottie is mainly for animating but you don’t have to add animations.
You just have to temporarily allow the Svg mime type. I usually do this with a snippet that can be enabled or disabled as I need it, and just import it to code snippets and enable whenever I need it. This way I can disable and remove any time I don’t need the function available.
Search for a plugin called “SVG Support”.
SVG is a vector format which means it maintains sharpness at any scale. PNG, WebP, and JPG are raster formats which can’t do that.
You can save your vector logo at a ridiculous resolution but it will be heavy and bad for performance.
The better way is to enable SVG uploads in WP. There are free plugins that do this or you can enable it with like four lines of PHP. Just Google either approach.