Using SVG graphics

Learn how to place, copy, or import SVG graphics in Adobe Muse.

Adobe Muse allows you to use vector graphics, created using tools such as Adobe Illustrator, in your site design. Currently, Adobe Muse natively supports the Scalable Vector Graphics (SVG) format. You can use the SVG format to create logos, icons, background fills, browser fill, and more, and place them directly on the web page canvas within Adobe Muse.

Graphics saved as SVG format are light and resolution independent. Hence, such graphics can be scaled to any dimension without affecting the page-load time and appearance of your site. SVG files are also supported on HiDPI displays. 

Since they are resolution independent, Adobe Muse treats SVG files the same way in both Standard and High-Resolution websites. SVG files are not downscaled to 50% of their size when placed on the web page canvas in Design view.

SVG settings in Adobe Illustrator

For SVG files created using Adobe Illustrator, do the following:

  1. In Adobe Illustrator, after you've designed the graphic, select File > Save As.

  2. Select SVG in the Save As Type drop-down. Browse to a location where you want to save the file, and click Save.

  3. On the SVG options dialog, set the following attributes:

    • Image Location: Embed
    • SVG Profile: SVG 1.1
    • Fonts - Type: Convert to outline
    • CSS Properties: Presentation Attributes
    • Decimal Places: 3
    • Encoding: Unicode (UTF-8)

  4. Click OK to save the file.

Importing SVG

Before you import and place an SVG file within Adobe Muse, ensure that you've followed the steps outlined in Preparing SVG files for placing in Adobe Muse.

  1. In Adobe Muse, select File > Place (Ctrl + D on Windows and Cmd + D on MAC).

  2. Browser to the location of the SVG file, select it, and click Open.

  3. In Adobe Muse, a thumbnail preview of the SVG is displaced along with the pointer. Click a suitable location on the web page canvas to place the SVG file. The Assets panel lists the file you placed.

With the SVG file placed, you can continue designing your site. You cannot crop the SVG image using crop tool. However, you can resize it to suit your design needs.

You can link an imported SVG file to a raster image. You can also relink imported images to SVG files.

Copying SVG from Adobe Illustrator

Adobe Muse allows you to copy content from Adobe Illustrator on to the web page canvas. Copying content is useful when you do not want to save and use full contents of an artwork in your site design.

When you copy parts of an artwork, Illustrator converts the selection to SVG and places it on the clipboard for Adobe Muse to use. Adobe Muse treats the copied content as embedded SVG, and you can resize the graphic per your design needs.

  1. In Adobe Illustrator, do either of the following:

    • Isolate Group or Selected Path: Right-click on the group or path you want to copy and select Isolate Group/Selected Path from the context-menu.
    • Manually select group or path: Select a group or path you want to copy.

  2. Use Ctrl + C (Windows) or Cmd + C (MAC) commands to copy the selected group or path.

  3. In Adobe Muse, use Ctrl + V or Cmd +V commands to paste the selected group or path on the web page canvas in Design view.

    The Assets Panels lists the pasted SVG file.

Import SVG for background and browser fills

  1. Depending on whether you want to add background fill or browser fill, select the Fill or Browser Fill respectively. For more information, see Using Fill and Browser Fill options.

  2. Click Add Image. Browse to the location of the SVG file, select it, and click Open.

  3. Set the Fitting and Position attributes appropriately.


When SVG files are added to background or browser fill, the image appears rasterized in Design view when the Fitting attribute is set to Scale to Fit or Scale to Fill. However, when previewed within Adobe Muse or on a Browser, the image is rendered as expected.

Video Tutorial

Danielle Beaumont

Logo Adobe

Prihláste sa do svojho účtu