Applying Dynamic Properties to SVG

The above graphics are embedded on the page once (and hidden) but then added back in. The top graphic has a CSS:hover selector added to it. Notice the emboss filter added at run-time.

It is possible to create a custom icon font from your vector graphics (such as SVG) through IcoMoon.

All this information came from: http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/

Aspect Ratio

Viewport and viewBox

The viewport is the area you carve out on a webpage for the artwork to be displayed in. To set the Viewport, you tweak the width and height attributes of the SVG tag. e.g. <svg width="100" height="200"> alternatively, you can set it with CSS. e.g. <svg style="width:100%;">

In these, the viewport size is modified.

The viewBox is similar in concept to Adobe Illustrator’s artboard; it is the internal canvas upon which the artwork is drawn. In these, the viewport is set to a square, and the viewBox is tweaked.

preserveAspectRatio

The preserveAspectRatio attribute of the <svg> tag takes the mandatory "align" value and an optional "meet or slice" value (separated by a space). The first (align) value can be:

• none - Do not preserve the aspect ratio (your artwork will become distorted if the viewport aspect ratio does not match the viewbox). The second value is not needed (in fact, it is ignored).
• Any combination of (xMin|xMid|xMax)([YMin|YMid|YMax]). This will force uniform scaling (i.e. preserve the aspect ratio of the artwork) For example:
  • xMinYMax will position the artwork in the lower left corner of the viewport.
  • xMaxYMin will position the artwork in the upper right corner of the viewport.
  • xMidYMid (this is the default value) will position the artwork directly in the middle (centered) of the viewport.
  • etc. See the W3C specifications for details.

The second value of the preserveAspectRatio can be “meet”, “slice”, or “none” and is needed when the first value is not "none".

• meet: This is the default and it will maintain the aspect ratio of the artwork to prevent distortion.
• slice: This will crop artwork that does not fit into the viewport.
• none: The artwork will fill the viewport, and it will distort if the viewport has not been manually set to the same aspect ratio as the artwork.

Changing the width and height attributes affects the overall size on the screen. By default the viewBox will attempt to fit entirely within the viewport and it will scale proportionally.

Changing the viewBox is like changing Illustrator’s Artboard. This has a more drastic effect on the appearance of the artwork.

Alternate Method

If the above fails, perhaps wrapping the SVG in a container than maintains its aspect ratio will be a better solution.

Responsive Sizing and Image Maps

It is possible to put an image map on a responsive image when one uses SVG. This process is described here.

Codrops has more information about Responsive SVG.

I created a demo of dynamically sized graphics here.

Tricks

Combining the best of PNG and JPEG

If you have a large photograph that you want alpha transparency on, you can do that using SVG. Basically you have to create an 8-bit PNG mask and lay it on top of the JPEG. This technique is described in detail here.

<svg preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 560 1388">
	<defs>
		<mask id="canTopMask">
			<image width="560" height="1388" xlink:href="img/can-top-alpha.png"></image>
		</mask>
	</defs>
	<image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg"></image>
</svg>

Filters

Smashing Magazine describes how SVG filters can be used to make display text.

http://www.smashingmagazine.com/2015/05/26/why-the-svg-filter-is-awesome/

Filters are also available in CSS, but there is some sharing with SVG. See Color Filters Can Turn Your Gray Skys Blue.

Drop Shadow

Drop shadows can be achieved using a filter.

<filter width="125%" height="125%" x="-12.5%" y="-12.5%" id="dropShadow">
  <feOffset dx="6" dy="6" in="SourceAlpha" result="offOut" />
  <feGaussianBlur in="offOut" stdDeviation="6" result="blurOut" />
  <feComponentTransfer in="blurOut" result="lightenOut">
    <feFuncA type="table" tableValues="0 0.4" />
  </feComponentTransfer>
  <feBlend in="SourceGraphic" in2="lightenOut" />
</filter>

<circle fill="#2FA7D1" cx="208" cy="608" r="200" filter="url(#dropShadow)" />

Explanation:

filter sets up the filter’s canvas compared to whatever the filter is applied to.

feOffset creates and moves the new object around on the stage. Tweak dx and dy to position the shadow. Since the in attribute specifies SourceAlpha, it will only copy the alpha channel, not all the colors. This effectively makes an all black copy—black is good for drop shadows, so yay.

feGaussianBlur makes that black copy blurry (to mimic a shadow). Tweak the stdDeviation to adjust bluriness.

feFuncA will tweak the alpha channel. Because the black, blurry copy is so dark, this is used to adjust the opacity. Tweak the second number in tableValues to adjust the opacity.

feBlend with a “normal” mode will simply stack the original graphic on top of the drop shadow object.

Accessibility

The Sitepoint article on SVG Accessibility contains several tips directly related to accessibility, but also has some interesting comments related to SVG in general, such as:

• If you inline SVG directly into your HTML, and you are using HTML5, then you do not need to namespace it. In other words, the SVG tag can be something like:
  <svg version="1.1" width="300" height="200">...</svg>
• Use the <title> tag to give a short description
• Use the <desc> tag to provide a long description of the content
• The <text> tag is very accessible and is the preferred method for displaying text from an accessible standpoint.
• Hyperlinks are keyboard focusable. <a xlink:href="http://example.com">

Graphic Reuse and Sprite Sheet

<use>

SVG’s <use> tag allows you to reference just a part of some SVG defined elsewhere and draw just that part somewhere else. However, you must use inline SVG to dynamically use only certain pieces. If you want to use SVG as a CSS background-image or in an <img> tag, then you can exploit fragment identifiers. It is a bit like using intra-page anchors (# syntax).

Fragment Identifiers

This information came from How SVG Fragment Identifiers Work. The concept here is to:

1. Define multiple viewboxes using the <view> element.
   

   <view id="icon-clock-view" viewBox="0 0 32 32" />
   <view id="icon-heart-view" viewBox="0 32 32 32" />
   <view id="icon-arrow-right-view" viewBox="0 64 32 32" />

2. Reference the views in your HTML or CSS.
   

   <img src="sprite.svg#icon-heart-view" alt="">
   		-or-
   .icon-clock {
   	background: url(sprite.svg#icon-clock-view) no-repeat;
   }
   

Hyperlinked SVG Buttons with Rollover Effect

It is super easy to make a stylized button when it is rectangular, but if you want an abstract shape then SVG provides a great solution.

1. To make this demo, first create your SVG code.
   1. The <svg> element only needs the viewbox attribute (although you will often want an id attribute too).
   2. Wrap the clickable element in an anchor tag. You will need to use SVG’s attribute syntax for the href attribute. For example:

      <a id="Star1" xlink:href="http://example.com/">

2. Place the SVG on your web page using the <svg> tag (do not use <img>, <iframe>, or CSS background-image).
3. Add some CSS to style the rollover effect.
   1. In this demo, the star’s stroke-width will increase to 15. (The star is a <polygon> defined with an initial stroke of 1.)

In the second star I changed the fill color so you can see what happens a bit easier on the rollover. SVG strokes are always centered over their path.