How to get SVGs from Sanity like images?

Yes, you can absolutely get SVGs from Sanity natively! SVG files are supported as image assets in Sanity's Content Lake.

How SVG Support Works

According to the official Sanity documentation on assets, Sanity supports SVG files as one of many image formats, including JPG, PNG, WebP, TIFF, GIF, HEIF, and AVIF (8-bit).

Important Behavior to Know

SVGs pass through the image pipeline untouched. This is a key detail - while Sanity's image pipeline can transform formats like JPEG, PNG, WebP, PJPG, TIFF, AVIF, and GIF, SVG and GIF files pass through the pipeline without being processed or transformed. This means:

• You can upload SVGs just like any other image
• They'll be stored and served via Sanity's global CDN at cdn.sanity.io
• Image transformation parameters (like resize, crop, etc.) won't apply to SVGs
• The SVG will be delivered as-is in its original format

How to Use SVGs

You can work with SVGs in Sanity the same way you work with other images:

1. Upload - Use the image field type in Studio or upload via the API
2. Reference - Store references to SVG assets in your documents using the image schema type
3. Query - Retrieve SVG URLs using GROQ queries, just like other image assets
4. Display - Use the asset URL directly in your frontend - the SVG will be served from Sanity's CDN

The asset URL structure is the same as other images:

https://cdn.sanity.io/images/<project-id>/<dataset>/<asset-id>-<dimensions>.svg

Since SVGs are vector-based and already scalable, the fact that they pass through untransformed is actually ideal - you get the full quality and scalability benefits of the SVG format while still benefiting from Sanity's global CDN delivery.