Stop Blurry Icons: Pixel‑Perfect SVG Setup (grids, strokes, viewBox) in IconVectors

SVG icons should be razor‑sharp at small sizes. If yours look soft, the usual culprits are sub‑pixel positions, fractional scaling, odd stroke widths, or a missing/misaligned viewBox. This guide shows how to set up grids, snapping, strokes, and a clean viewBox in Axialis IconVectors, then verify sharpness on export. The page format/SEO mirrors your current tutorials for consistency.

Why do SVG icons look blurry?

• Sub‑pixel geometry — shapes or paths land between device pixels, so rasterizers must antialias them.
• Stroke math — a centered stroke with an odd width can straddle pixels unless it’s positioned carefully.
• Fractional transforms — scaling/translation with decimals pushes edges off the pixel grid.
• Poor viewBox — missing or non‑integer viewBox values make sizing unpredictable.

Step‑by‑step in IconVectors

1. Start with a known canvas & show the grid
   • Open or create: File → Open… (Ctrl+O) or New Icon (Ctrl+N).
   • Grid & snapping: enable the grid and snap‑to‑grid via the View menu so vertices and shapes land on whole pixels.
   • Pixel preview: in the Preview panel, toggle to Pixel mode to see how the icon will rasterize at small sizes (great for catching issues early).

   

2. Align shapes to whole pixels

   Select shapes and check their X/Y position and Width/Height in the toolbar/panels. Prefer integer values so edges align with the pixel grid.

   • Filled geometry: keep edges on integers.
   • Stroked geometry: use even stroke widths (2, 4…) at small sizes; for odd strokes (1, 3…), offset by 0.5 so the stroke sits squarely on the pixel centerline.
   • Flatten decimals: avoid fractional transforms on groups; set scale back to 1 and round positions.

   See the illustration below. Each shape follows pixel-perfect rules and is aligned with the grid:

   
   • Small inner shape: Filled only, without stroke. This allows it to align directly to the pixel grid.
   • Second shape: No fill, with a 1px stroke. To align the stroke perfectly, we place it on half-pixel coordinates (x=6.50, y=6.50).
   • Large outer shape: With a 2px stroke. By aligning it to whole-pixel coordinates, the stroke fits the pixel grid precisely.

   Here is the SVG code:

   <?xml version="1.0" encoding="utf-8"?>
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" 
   id="Icon 3" viewBox="0 0 24 24">
     <path fill="#4B89DC" fill-rule="evenodd" d="M10,9C9.45,9,9,9.45,9,10L9,14C9,14.55,9.45,15,10,15L14,
     15C14.55,15,15,14.55,15,14L15,10C15,9.45,14.55,9,14,9L10,9z"/>
     <path fill="none" fill-rule="evenodd" stroke="#4B89DC" d="M8.33,6.5C7.33,6.5,6.5,7.33,6.5,8.33L6.5,
     15.67C6.5,16.67,7.33,17.5,8.33,17.5L15.67,17.5C16.67,17.5,17.5,16.67,17.5,15.67L17.5,8.33C17.5,7.33,
     16.67,6.5,15.67,6.5L8.33,6.5z"/>
     <path fill="none" fill-rule="evenodd" stroke="#4B89DC" stroke-width="2" d="M5.99,3C4.36,3,3,4.36,3,
     5.99L3,18.01C3,19.64,4.36,21,5.99,21L18.01,21C19.64,21,21,19.64,21,18.01L21,5.99C21,4.36,19.64,3,
     18.01,3L5.99,3z"/>
   </svg>
   

3. Set a clean viewBox

   At the root <svg>, ensure a canonical, integer‑based viewBox such as 0 0 24 24. This keeps scaling predictable.

   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">…</svg>

   Verify with View → Source Code (F3). The read‑only viewer is perfect to double‑check coordinates and attributes.

4. Control stroke behavior on resize

   Icons that scale across sizes can keep a consistent stroke width by using the SVG property vector-effect="non-scaling-stroke". Add it on stroked paths after export:

   <path d="…" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke"/>

   For single‑size pixel‑perfect icons, you can omit it and tune stroke widths exactly to your grid.

5. Export a quick raster check

   Use File → Export → Export to Bitmap (Ctrl+F3) to preview 1×/2× PNGs (e.g., 24 and 48 px). Look for soft edges—if you see any, return to Steps 2–3 and tweak geometry.

Notes & troubleshooting

• Only some edges are soft — that shape likely has fractional X/Y or non‑integer dimensions. Round them.
• Diagonal lines will always be antialiased to some degree; prefer orthogonal edges for tiny sizes or simplify the shape.
• Retina sets — export integer multiples of your base grid (24 → 24/48/72), ideally via File → Export → Export to Multiple Bitmaps (Shift+F3) to produce all sizes at once.
• Theming — if your icon won’t change color in code, switch fills/strokes to currentColor before exporting.