SVG image-rendering Property
image-rendering controls the scaling algorithm applied to raster images embedded within SVG, useful for crisp pixel art.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Controlling Raster Image Scaling Within SVG
When an SVG contains an embedded raster image via the <image> element, setting the CSS image-rendering property to pixelated disables the browser's default smoothing interpolation, keeping small pixel-art-style raster images crisp and blocky when scaled up rather than blurred, which matters for retro game assets or icon sprites embedded in vector graphics.
- pixelated value disables default smoothing interpolation when scaling
- Keeps small pixel-art raster images crisp and blocky rather than blurred
- Relevant for retro game assets or icon sprites embedded within SVG
Other image-rendering Values and Browser Differences
Beyond pixelated, values like crisp-edges offer a similar non-smoothed rendering intent with slightly different browser support history, and it's worth testing the specific value across target browsers since image-rendering support and exact visual behavior has historically varied more than most CSS properties between browser engines.
- crisp-edges offers similar intent to pixelated with different support history
- Behavior has historically varied more between browsers than typical CSS properties
- Testing the specific chosen value across target browsers is worthwhile
Frequently Asked Questions
Does image-rendering affect vector shapes within the same SVG, not just embedded raster images?
No, it specifically affects how embedded raster images (via the <image> element) are scaled — native vector shapes like paths and circles render based on the SVG's own geometry regardless of this property.
Is pixelated the correct value for all pixel-art use cases?
It's the most widely supported value for that intent today, though checking current browser support tables is worthwhile since rendering property support has shifted over browser versions historically.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG