Pandarianin

The October 6 release of Adobe Muse CC 2014.2 includes support for importing Scalable Vector Graphics (SVG). SVG usage in websites has become more desirable because, unlike raster images which are simply a collection of pixels, SVGs are drawing instructions which beautiful at any browser zoom level or screen resolution.

The biggest challenge with building HD websites using raster images is that you need larger, higher resolution images for high resolution screens and these larger images take significantly longer to download to a browser. Hence, developers typically create low and high resolution versions of each image and choose which one to download and display based on attributes of the screen. SVGs, on the other hand, are typically resolution independent. I say typically because it is possible to embed a raster image within an SVG. For the typical SVG illustration, there is no need for multiple versions and therefore no penalty for rendering on a high resolution screen.

Browser Support

Basic SVG support is ubiquitous across modern browsers. The problem children include Internet Explorer 8, really old versions of iOS Safari (before 3.2) and Android versions prior to 3. Of these browsers that do not support SVG, IE 8 has the largest global usage at somewhere around 4% and shrinking. Muse generates a raster image fallback for these browsers that do not support SVG.

Importing SVG into Muse

Prior to Adobe Muse CC 2014.2, users could Place an SVG onto a page by choosing “Insert HTML…” from the Object menu and then pasting the <svg> embed code into the dialog. The <svg> would then be embedded in the HTML code for that page when exported and would render perfectly in browsers that support SVG. However, there would be no image fallback for older browsers and the design time rendering of the SVG may or may not have succeeded, depending on whether or not you were running Muse on Windows with IE 8 installed.

With the release of Adobe Muse CC 2014.2, users can import SVG in any of the following ways:

Place directly onto the page

Select “Place…” from the File menu in Muse and choose an SVG just as you would a JPG, PNG, PSD or GIF.

Placed SVGs within Muse behave more similarly to embedded HTML than to a placed image. At Place time, Muse will render the SVG using Safari on the Mac and IE on Windows to generate a poster image for design time rendering. Similar to embedded HTML, this poster image is regenerated every time you resize the placed SVG within Muse. At export time, this poster image is used as the fallback for older browsers that do not support SVG.

At load time, Muse will execute the following JavaScript to determine if the browser supports SVG. If it does not, then the ‘src’ attribute of the <img> will be changed to point to the fallback image.

Note that the ‘width’ and ‘height’ attributes of the <img> element is determined by the dimensions of the page item on the page as sized by the user within Muse. It is up to the SVG code to render within these dimensions. That is, there is no scale being applied. Therefore, the SVG has the freedom to respond to different dimensions in different ways depending on how it was created. For example, it may change the crop or it may scale to fit within the dimensions as if it were a background-image with background-size set to ‘contain.’ Its behavior is unknown to Muse just as the resize behavior of arbitrary HTML pasted into Muse is unknown. It is primarily for this reason that Muse will regenerate the poster image after a resize operation.

Conversely, Placed images have a containing frame, basically scale when resized and are cropped by the frame. Their resize behavior is completely predictable within Muse.

Import as a background-image

Just as raster images can be imported as a fill for any page item, Page or Browser area, SVGs can be imported from the same Fill or Browser Fill panel. When exported, they SVG is applied using a background-image CSS property as follows:
 

Код: <div class="svg colelem" id="u80"><!-- simple frame --></div>
#u80
 {
      z-index: 2;
      width: 177px;
      height: 106px;
      border-width: 1px;
      border-style: solid;
      border-color: #000000;
      position: relative;
      background: #FFFFFF url("../images/next_poster_u81.png") no-repeat left top;
      background-size: 48px 48px;
 }
.svg#u80
 {
      background-image: url('../images/next.svg');
 }

SVGs imported as background fills can be set to “Scale to Fill,” which sets the background-size CSS property to ‘cover,’ or “Scale to Fit,” which sets the property to ‘contain.’ Muse does not regenerate the poster image for background SVGs set to Scale to Fill/Fit and therefore the design time rendering may be a bit pixelated. However, the browser rendering of the scaled SVG is high quality and does not require the SVG to have been saved as a Responsive SVG.

Copy/Paste from Illustrator

Copy a selection from your favorite illustration in Adobe Illustrator CC 2014 and paste into Muse. If you are using Adobe Illustrator CC 2014.1 or later, then text will be converted to outlines. If you are using Adobe Illustrator CC 2014.0, then the SVG Illustrator generates for the clipboard uses SVG settings based on the choices from the latest Save As SVG operation within Illustrator.

The output from Muse for pasted SVG is equivalent to the output from a Placed SVG. If you’d like the SVG to be embedded instead of referenced in an external SVG file from an <img> element, you can still paste the SVG code into an Arbitrary HTML element as in prior versions of Muse. However, using an embedded approach will not generate a fallback image.

Responsive SVG and other SVG settings

As mentioned above, placing and resizing SVG in Muse generates an <img> element in the HTML with ‘width’ and ‘height’ attributes that match the resized dimensions. How the SVG responds to the width and height depends on how the SVG was created. If the SVG was saved from Illustrator and the Responsive checkbox was unchecked, then the resize may simply change the cropping of the SVG. If the Responsive checkbox was checked, then the SVG will typically scale the SVG to fit within the dimensions such that the entire graphic is visible. This behavior is known as ‘contain’ in CSS background-size parlance. As always, the rendering is also dependent on the implementation of the SVG support within each browser so some browsers may behave slightly differently for some dimensions on some SVGs.

If the SVG is imported as a background image fill and set to “Scale to Fill” or “Scale to Fit,” then the SVG will be scaled accordingly by the browser and the behavior does not seem to be dependent on having “Responsive” checked in Illustrator when saving the SVG.

Font and image settings

There are numerous ways to deal with fonts within SVG, but we strongly recommend Outlining fonts. Subsetted fonts are not supported by Firefox. SVG fonts that are not subsetted will render correctly only if the visitor to the site has that font installed. For the best support across browsers, it is recommended that fonts be set to Outline.

Similarly, images within an SVG can either be embedded or linked. We strongly recommend embedding so that the linked image does not need to be managed.