• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Draft / SVG Looks Pixelated When Small

SVG Looks Pixelated When Small

Last updated on August 14, 2019 by Sal Ferrarello

I was working with an SVG on a website and when it was sized down too small it became pixelated.

Root Cause

The problem is as the graphic becomes smaller there are less pixels to work with. When rendering the SVG the browser is using equations to determine pixels but the equations result in numbers that fall in between pixels.

Solution

It seems the solution is to set the desired size of your SVG in your editing program and then make certain all of your pixels align to the grid. This will still allow your SVG to scale up but will also allow it to render at the smaller size.

Other Resources

  • Graphic Design Stack Exchange Quality Loss When Scaling down SVG’s
  • Adobe Illustrator Help Draw pixel-aligned paths for web workflows
Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Dev Tips, Draft, Solution Tagged With: svg

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in