SVG Image Files

Sharp corners on every screen

This tutorial describes how to work with SVG (Scaled Vector Graphics) image files.

If you would like help on this, let me know!

Here are the sections

1. Why SVG?
2. Creating Editing SVG
3. Storing SVG
4. D3

Why SVG?

SVG (Scaled Vector Graphics) files are basically text “programs” to draw graphics on the screen. So SVG graphics look sharp no matter the size of the screen, unlike bitmapped based graphic files such as jpg, git, and png.

The W3C spec for SVG reached back to 1998.

• https://svgwg.org/

The rise of modern (HTML5) browser usage means that in 2016, websites can rely on most visitors to use a browser that can render SVG files render properly.

The growing adoption of the FontAwesome.com SVG icon library in websites is leading SVG adoption.

Because of wider adoption, Adobe had provided a browser plug-in, but stopped development on it.

Examples of SVG graphics:

• iconmonstr.com is a free library of 24x24 pixel icons.

• https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg

Others:

• http://gael-varoquaux.info/blog/wp-content/uploads/2010/countries.svg from http://gael-varoquaux.info/misc/svg-word-map-of-countries.html

• http://tavmjong.free.fr/SVG/ARIA_BUTTON/svg_button_aria.svg

Creating and Editing SVG

Vector Art programs:

• Online: Boxy-SVG, and FREE. Wish they had a larger sample gallery.
• http://svg-edit.googlecode.com
• Sketch for Mac
• Inkscape
• PhotoShop
• $58 Affinity Designer for Mac

SVGs compression:

• petercollingridge.appspot.com/svg-editor

Convert pictures:

• Convert .png, .jpg, .ico, .icns and app icons

Storing SVG

As of June 2016, SVG files are not allowed into photo-storage cloud services Flickr, Photobucket, Img.ur, Google Drive.

One solution is to use GitHub Gist.

PROTIP: Anyone can anonymously store an SVG file in Gist.GitHub.com.

1. Paste your SVG file and hit the Add button.

2. Copy the generated URL.

3. To put the asset in MaxCDN, paste the URL into RawGit.com

4. Copy the production URL in the CDN, in the form of:

   https://cdn.rawgit.com/user/repo/tag/file

5. But during development use the URL in the form of:

   https://rawgit.com/user/repo/branch/file

6. Paste either in an internet browser address field and you’ll see the SVG image rendered.

Rendering SVG

One approach is rendering using this HTML object tag:

<a href="#" class="svg">
<object data="img/twitter.svg" type="image/svg+xml" class="mailicon">
</object>
</a>

Notice the MIME type="image/svg+xml".

To make the object clickable, this CSS is needed:

  a.svg { position: relative; display: inline-block; }
  

SVG Embedded in HTML

Internet Explorer did not support SVG until IE 9, which has delayed enterprise adoption. But even with IE 11 workarounds are needed as caniuse.com points out:

The star graphic below is an SVG image generated by the browser based on SVG document fragment pasted into a Markdown file generated into HTML by Jekyll:

As noted above, the HTML code to render the above begins:

   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink" 
   width="24" height="24" 
   viewBox="0 0 24 24"><path d="M427 ...
   

The image is clickable.

This site proposes a fall-back to png:

   <switch>
      <g>
            <g>
              <path fill="#62C6E9" d="M948.968 ..." />
            </g>
            <g>
              <path fill="#62C6E9" d="M948.968 ..." />
            </g>
      </g>
        <foreignObject>
            <p>Fallback image</p>
            <img src="thoughtful-logo.png" >
        </foreignObject>
   </switch>
   

This avoids the use of a conditional added at the end for IE users:

   <!--[if lt IE 9]>SVG not supported<![endif]-->
   

Thus, SVG can be embedded in CSS and live JavaScript.

• http://tavmjong.free.fr/SVG/

LibRsvg

• https://www.wikiwand.com/en/Librsvg

Examples on Codepen:

• http://codepen.io/anon/pen/KVZNGp

• http://codepen.io/thomasquayle/pen/KwxwoO

• https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md

<amp rendering of the gear clock

QUESTION: Is there code to generate click maps by parsing the SVG file?

Amazon’s icons at http://aws.amazon.com/architecture/icons

• https://d3aeo97xi0ngf3.cloudfront.net/resources/img/logos/Compute_AmazonEC2.svg

   d3.select("body").append("svg").append("rect").attr("width",50).attr("height",50).style("fill","blue");