In Adobe Illustrator, after you've designed the graphic, select File > Save As.
Utoljára frissítve:
Learn how to import SVG graphics in Adobe Muse CC. You can place, copy, and import SVG graphics into Adobe Muse.
Megjegyzés:
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
Megjegyzés:
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:
-
-
Select SVG in the Save As Type drop-down. Browse to a location where you want to save the file, and click Save.
-
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)
- Image Location: Embed
-
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.
-
In Adobe Muse, select File > Place (Ctrl + D on Windows and Cmd + D on MAC).
-
Browser to the location of the SVG file, select it, and click Open.
-
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 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.
-
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.
-
Use Ctrl + C (Windows) or Cmd + C (MAC) commands to copy the selected group or path.
-
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
-
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.
-
Click Add Image. Browse to the location of the SVG file, select it, and click Open.
-
Set the Fitting and Position attributes appropriately.
Megjegyzés:
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
Bejelentkezés a fiókba