Using vector graphics in Adobe Muse

Search
Adobe Muse User Guide

On this page

Applies to: Adobe Muse

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Learn how to import SVG graphics in Adobe Muse CC. You can place, copy, and import SVG graphics into Adobe Muse.

Note:

Adobe Muse is no longer adding new features and will discontinue support on March 26, 2020. For detailed information and assistance, see Adobe Muse end-of-service FAQ.

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.

Process SVG files before placing in Adobe Muse

Note:

The following procedure is valid only if you use Adobe Muse 2015.1 or earlier versions.  

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)
    Specify SVG Settings in Adobe Illustrator, and before importing SVG in Adobe Muse CC.

  4. Click OK to save the file.

Importing SVG

If you are using Adobe Muse version 2015.1 or earlier, ensure that you've followed the steps outlined in Preparing SVG files for placing in Adobe Muse before you import and place an SVG file within 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.

    Assets panel

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

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.
    Select a group or path

  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.

    Web page canvas

    The Assets Panels lists the pasted SVG file.

    Assets panel

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.

    Click Add Image

  3. Set the Fitting and Position attributes appropriately.

    Set the Fitting and Position attributes appropriately

Note:

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.

Add SVG images to slideshows

For Adobe Muse versions 2015.1 and later, you can add SVG images to slideshows. First drag and place a Thumbnails widget from the widget library. Then, select your vector images from your Creative Cloud Libraries, and place them in your slideshow.

Video Tutorial

Video Tutorial
Danielle Beaumont