By David Stephens
On October 6, 2014

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.

 

<img src="images/next.svg" width="48" height="48" alt="Arrow image" data-mu-svgfallback="images/next_poster_.png"/>

 

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 and the ‘svg’ class will be added to the <html> element so that ‘.svg’ selectors will become enabled in the CSS.


var supportsSVG = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1");

 

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="colelem" id="u80"><!-- simple frame --></div>


<!-- Default CSS properties for the above div with id "u80" -->
#u80 
{ 
      ...
      background: #FFFFFF url("../images/next_poster_u81.png") no-repeat left top; 
      background-size: 48px 48px;  
}

<!-- The following selector is automatically enabled when the 
     'svg' class is added to <html> element at load time if the 
     browser supports SVG. Otherwise, the SVG selector is 
     invisible and the fallback poster image is used instead. -->
.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.


Trouble shooting

SVG is powerful when authored well and the appropriate settings are chosen. However, if the wrong settings are chosen then various problems may arise.

Wrong font in some browsers?

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.

SVG is cropping instead of resizing?

Muse exports Placed SVG as an <img> element with a width and height matching the dimensions of the SVG in the layout. Note there is no scale specified. The browser then attempts to render the SVG code within this <img> element. If the SVG has fixed dimensions in its code, it may not be able to render within the specified width and height and will crop instead. This behavior can typically be resolved by making sure “Responsive” is checked in Illustrator when saving the SVG.

SVGs imported as background fills in Muse are exported using ‘background’ CSS properties. If the fill has been set to “Scale to Fit” or “Scale to Fill,” then the appropriate ‘contain’ or ‘cover’ value is chosen for the ‘background-size’ CSS property to achieve the desired effect. Because the browser uses scaling to resize the background image as opposed to changing its width and height, SVGs used as a background fill do not need to be saved as “Responsive.”

Note that using any image as a background fill instead of as a Placed image on the page prevents the use of ‘title’ and ‘alt’ attributes for improved Search Engine Optimizations.

SVG renders as text instead of as a graphic in browser?

If the SVG fails to render as a graphic and instead you see the SVG code as if it were text, then your server is incorrectly configured. The problem and the fix are described here.

COMMENTS

  • By David Blatner - 11:36 AM on October 14, 2014  

    It’s awesome to see SVG get attention like this. I can’t wait ’til InDesign can import/export SVG, too.

  • By Chris Adams - 8:55 AM on October 15, 2014  

    Very informative, thank you!

    I’ve noticed that, in the previous version of Muse, when I copied and pasted SVG code from Illustrator and inserted using the ‘insert HTML’ option, the appearance elements of the design were included (a drop shadow in my case), but with new ‘place’ option, the drop shadow effect no longer transfers to Muse. Is there any particular reason for this?

    • By David Stephens - 12:08 PM on October 18, 2014  

      The shadow should still work, so I’d love to see an example. Does the effect display in the browser? If you save the illustration as an SVG file and open it directly in the browser without using Muse, do you see the shadow? If you repeat your old process and paste into an HTML element within Muse, do you see the shadow?