Embed images and fonts in SVG
Add 1 SVG and the images (PNG, JPEG, WebP, GIF) or fonts (TTF, OTF, WOFF, WOFF2) it references, and combine them into 1 SVG so you do not need to share the assets separately. Specify the asset to use for each reference and create the SVG. You can save it once its preview displays successfully. Assets at external URLs are not retrieved automatically.
What you can do
Bundle images and fonts
Embed added local assets into the SVG to reduce the need to send assets separately.
Check references and assets
Specify the corresponding file for each image path or font name in the SVG. The SVG is not created with unresolved references remaining.
Check the created SVG’s display and save
Check how it displays as an image and save the SVG with embedded assets. Original files are not overwritten.
How to use
Add an SVG and assets
Choose one SVG and the images and fonts it references. You can also add them together from a folder.
Map the assets to embed
Check the local file to use for each reference. For references that are not matched automatically, select from the assets already added.
Create the SVG
Once there are no unresolved references, press “Create SVG with images and fonts.”
Check the display and save
Check the text and images in the created preview before saving. If it fails to display, check the original SVG and assets.
Useful when
Hand over the SVG and assets together
Combine a graphic that references images and fonts in separate folders into one SVG that is easy to hand over.
Check the cause of broken references
Compare the required assets with the added files, then specify any missing images or fonts.
How references and embedding work
Relative paths and file matching
References are matched automatically when a reference path relative to the SVG uniquely matches an added asset’s path. Select manually when files with the same name are in different folders or candidates overlap.
Specify the file for each font name
The tool does not extract fonts from your device based only on font names in the SVG. Add the required font files and specify the matching files.
Assets at URLs are not fetched automatically
Even when an external URL is referenced, provide the images or fonts locally and specify them. This screen has no operation to fetch assets from URLs.
Embedding is separate from reducing file size
Including image data in the SVG may increase the size of the SVG file itself. Fonts are converted to WOFF2 and embedded. Optimize SVG code with a separate tool.
Differences by display method
The preview displays the SVG as an image. The same appearance is not guaranteed in every app, so also check the required display at the destination.
Frequently asked questions
What should I do if an asset cannot be found?
Add images or fonts, then specify them in the selection field for the corresponding reference. Automatic matching may not work with different folders, duplicate paths, or external URLs.
Which assets can I use?
Images can be PNG, JPEG, WebP, or GIF; fonts can be TTF, OTF, WOFF, or WOFF2. Specify SVGs one at a time.
Does it find fonts automatically?
The tool does not search your device or the web for fonts based only on a font name. Add and select a file you have locally.
What happens to assets that are already embedded?
Images and fonts embedded as data URIs, and # references within the SVG, are not counted as external references. You can create the SVG if no detected references remain unresolved.
What happens when I add or reselect assets?
If you add only assets, they are added to the list and previously assigned assets are kept. Check automatic matching if more candidates with the same path become available, for example. Input that includes a new SVG replaces the current SVG and all its assets.
What if there are unsupported references?
External use or script references cannot be embedded. SVGs containing imports of external CSS also cannot be loaded. Organize the references in the original app or another suitable app before selecting the SVG.
Will the SVG become smaller?
Reducing file size is not the purpose of this tool. Including assets in the SVG may increase its size. Use SVG optimization if you want to clean up the code.
What if the created SVG cannot be displayed?
The save option is not shown on this screen until the SVG displays successfully. Check the original SVG and assets, review the mappings or files, and create it again.
Input and results
- Input
- 1 SVG plus images and fonts. Add from files or folders.
- Images
- The original data of added images is embedded. Images are not resized or compressed.
- Fonts
- Mapped fonts are converted to WOFF2 and embedded.
- Output
- original-name-embedded.svg. You can save after the created SVG displays successfully.