Images, icons & files

How to use SVG images

September 15, 2026
How to use SVG images

To use an SVG image in TeleportHQ, upload the .svg file in the Assets Manager's Uploads tab, then drag it onto your page or right-click it and choose Add Image Block. It's added as an image that stays sharp at any size. An uploaded SVG can't be recolored in the editor; for icons you want to recolor, use the Icons tab instead.

Before you start

  • An SVG (Scalable Vector Graphics) file is an image made of shapes instead of pixels, so it looks crisp on any screen. Logos and illustrations are often SVGs.
  • The file must be a real SVG. TeleportHQ checks its content when you upload it.

Add an SVG file

  1. In the left sidebar, click Assets Manager.
  2. At the top of the panel, click the Uploads tab.
  3. On the Public folder's row, click + (tooltip Upload assets or create folders).

  4. Click Upload Assets.

    The menu of the Public folder's + button in the TeleportHQ Uploads tab, with Upload Assets highlighted
  5. Pick your SVG file, for example bakery-logo.svg. It appears in the Public folder.

  6. Drag the file from the folder onto the canvas. Or right-click it and choose Add Image Block. It appears as an image, inside the selected element, or at the end of the page if nothing is selected.

    The right-click menu of an uploaded picture in the TeleportHQ Uploads tab, with Add Image Block highlighted

To size it, select the image and set Width and Height in the right panel's Size section. See How to set an element's width and height.

Paste SVG code

If you copied SVG code (text that starts with <svg), select where it should go on the canvas and paste it with Ctrl+V (Cmd+V on Mac). TeleportHQ adds it as an image with the SVG built in. It isn't saved as a file in the Assets Manager.

Check that it worked

The SVG shows on the canvas as an image. Zoom in: the edges stay sharp.

Troubleshooting

"Upload failed. The extension of your file does not match its content. Please check your file." The file ends in .svg but isn't valid SVG. Export it again from your design tool as SVG.

I can't change the color of my SVG SVGs in TeleportHQ are added as images, and the editor can't change the colors inside an image. Change the color in your design tool and upload the file again. If you need a recolorable icon, pick a similar one from the Icons tab. See How to add and color icons.

There's no Edit image button on my SVG Edit image (the image editor's Crop, Adjust, Text, Background, AI and Export tabs) works on PNG, JPEG and WebP pictures only, so an SVG has no Edit image button and no Edit Image… in its right-click menu. Edit the SVG in your design tool instead.

Good to know

Share

Related Articles

How to add and color icons

In the TeleportHQ Assets Manager, open the Icons tab, search for an icon such as "cake" and click or drag it onto your page; to change its color, select the icon, click + next to Background in the right panel and choose color, and resize it with Width and Height in Size.

How to upload images, videos and files

To upload files in TeleportHQ, open the Assets Manager's Uploads tab and click + → Upload Assets on the Public folder, or drag files from your computer onto the editor; they appear in the folder, ready to add to your pages, and TeleportHQ warns you when a file is heavy for a web page.

How to add and replace images

In TeleportHQ, you add an image with the Image element or by dragging an uploaded file onto the page, replace it by selecting the image and picking another file in the Assets Manager, and crop, adjust, add text, remove the background, edit with AI or resize it with Edit image.

How image optimization works (and how to turn it off)

When you publish or export a TeleportHQ site, each uploaded image is resized to the size it's shown at, so pages load faster; if an image looks blurry, right-click it in the Assets Manager and choose Disable Optimisations, and for WebP images and phone and tablet sizes turn on Advanced Image Optimisations in Project settings → Editor → Preferences → Advanced features.

Which files can I upload, and how big can they be?

TeleportHQ accepts images (jpg, png, gif, svg, webp, ico), videos (mp4, m4v, mov), documents (pdf, Word, Excel, PowerPoint, zip), audio, .glb 3D models, fonts and text files; trial and Pro plans allow 10 MB per file and 1 GB per project, Premium allows 30 MB per file and 3 GB per project, and smaller files are flagged as heavy when they would slow a page down.