Wilson Mar bio photo

Wilson Mar

Hello. Hire me!

Email me Calendar Skype call 310 320-7878

LinkedIn Twitter Gitter Google+ Youtube

Github Stackoverflow Pinterest

Sharp corners on every screen


Overview

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:

SVGs compression:

Convert pictures:

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

&LT;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

D3

D3.js creates graphs by generating SVG using JavaScript such as this:

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

.append and .attr are operators.

The D3 library is added in the <head> section of HTML:

   
   

Circle:

   
      
   
   

This example is from the video course about D3 on Pluralsight.com.

jsbin.com

Animation

https://maxwellito.github.io/vivus/ provides a library to animate SVG files (looks like animated GIFs).

Resources:

  • https://msdn.microsoft.com/en-us/library/gg589526%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396#Ways_to_Render_SVG explains the differen ways to render SVG.

More on front-end styling

This is one of several topics:

  1. Text Editors
  2. Markdown text for GitHub from HTML
  3. 508 Accessibility

  4. JAM Stack Website Project Plan
  5. HTTP/2 Transition Project Plan
  6. Static websites
  7. Jekyll Site Development

  8. Website styles
  9. Website Styling

  10. Email from website
  11. Search within Hyde format Jekyll websites
  12. Windows Tile Pin Picture to Website Feed

  13. Data Visualization using Tableau