ImageToSVG

How to Print SVG with CSS — Print Stylesheets & @media print

SVG prints at vector quality at any size — use CSS @media print to control scaling, colors, and page breaks for SVG in print documents.

Preset:
Colors:
VTracer vectorization + SVGO optimizationPrivacy protected

CSS @media print for SVG

Inside `@media print`, set explicit SVG width and height to fit the print page. Remove box shadows and screen-only decorations. Set `color-adjust: exact` to force accurate color printing without browser auto-adjustments.

  • @media print { svg { width: 100%; height: auto; } }
  • color-adjust: exact — prevents browser from lightening colors
  • Remove: box-shadow, filter effects for print performance

Fixing SVG Print Scaling Issues

SVG with percentage width may not print correctly — set explicit cm or mm dimensions in the @media print stylesheet. For multi-page SVG documents, use @page rules with defined margins.

  • Set SVG width: 18cm for A4 print with margins
  • @page { margin: 2cm; } controls print page margins
  • viewBox ensures SVG content scales correctly on page

Frequently Asked Questions

Why does my SVG print blurry?

Check if the SVG is embedded as a raster PNG (via <img> in some contexts). For crisp printing, inline the SVG or embed it as an <object> so the browser renders it as vector.

How do I print an SVG map at exact scale?

Set the SVG width and height in mm/cm at the real-world scale ratio. For 1:10000 scale, 1km = 10cm in the SVG — set width='100mm' for a 1km-wide map.

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