MageCDN supports hosting SVG files in its Plus and Pro plans. The SVG files can be served in both vector (original) format and raster (like, PNG and JPEG) formats.
By default, MageCDN serves SVG files in their original vector format. For example:
URL:
https://i.magecdn.com/d2b508/00b609_favicon
will return the original SVG file, which can be embedded using <img> tag
<img src="https://i.magecdn.com/d2b508/00b609_favicon" />
Pro Tip: When embedding SVGs as <img>, you cannot manipulate their fill or stroke colors via CSS.
If you need to do that, consider inlining the SVG using the “external-svg-loader” library. This fetches external SVGs via XHR and inlines them, enabling dynamic styling.
<script src="https://unpkg.com/external-svg-loader/svg-loader.min.js"></script>
<svg data-src="https://i.magecdn.com/d2b508/00b609_favicon" fill="#000"></svg>
If you prefer to serve your SVGs as raster images, you can convert them by appending the f query parameter.
Example – Convert to PNG:
https://i.magecdn.com/d2b508/00b609_favicon?f=png
By default, the image is served at its intrinsic size. To specify the width, use the sz parameter.
Example – Resize to Width 512px (Auto height using aspect ratio):
https://i.magecdn.com/d2b508/00b609_favicon?f=png&sz=512w