Wilson Mar bio photo

Wilson Mar


Calendar YouTube Github


Sharp corners on every screen

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean


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


  • 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:


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


  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">

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" 
   width="24" height="24" 
   viewBox="0 0 24 24"><path d="M427 ...

The image is clickable.

This site proposes a fall-back to png:

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

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/


  • 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.js creates graphs by generating SVG using JavaScript such as this:


.append and .attr are operators.

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




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



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


  • 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. UI Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML
  4. 508 Accessibility

  5. gRPC (g___ Remote Procedure Call)
  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development
  12. Gatsby app generator

  13. Website styles
  14. Website Styling
  15. VueJs front-end framework

  16. Protractor to automate testing of Angular and other web pages

  17. Email from website
  18. Search within Hyde format Jekyll websites
  19. Windows Tile Pin Picture to Website Feed

  20. Data Visualization using Tableau