Friday, October 24, 2014

Inline SVG: Can I use Part 2

Let's draw simple circle in svg file.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
  width="200" height="200">
 <circle cx="100" cy="100" r="80" stroke="grey" stroke-width="3" fill="#3f85e5" />
</svg>



We can inline svg inside HTML page, svg becomes an element in any part inside <body> tag: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline SVG Demo</title>
</head>
<body>
</body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
  width="200" height="200">
 <circle cx="100" cy="100" r="80" stroke="grey" stroke-width="3" fill="#3f85e5" />
</svg>
</html>

The test window for cross browser testing:


The test results are shown in small windows and can be opened in own virtual machine.


Next point is to test CSS styling. It can be added in two ways with SVG inlined. 
First approach is usual CSS styling in HTML <head> section:
<!DOCTYPE html>
<html>
  <head>
    <title>CSS and SVG test</title>
    <style type="text/CSS">
      .redness {
        fill: #FF0066;
      }
    </style>
  </head>
 <body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
      width="20" height="20">
     <circle cx="10" cy="10" r="8" stroke="grey" stroke-width="2" class="redness" />
    </svg>
</body>
</html>

Second approach is to inline CSS within SVG itself. To ignore special symbols, like less or grater sign use <![CDATA[ ... ]]> for CSS:
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
      width="20" height="20">
      <style>
        <![CDATA[
        .orange {
          fill: #FF9900;
        }
        >
      </style>
     <circle cx="10" cy="10" r="8" stroke="grey" stroke-width="2" class="orange" />
    </svg>

For SVG support testing special page is created at http://highrobotics.com/media/context/article/svg_compatability/svg_test.html 

Test results

Next desktop operating systems were in use: Mac OSX 10.9 and 10.6, Windows 7 x64, Windows XP SP2 x32, Ubuntu 11.10 (only Chrome v. 16).

Mobile and tablet devices are shown on the left with their browsers. Only Windows Phone is missing.

The results for desktop:

Chrome: 38, ..., 16 *
Internet Explorer: 11, 10, 9,  8, 7, 6
Firefox: 31, ..., 4, 3.6, 3.5
Safari: 8, 7, 6.1, 5.1

* - green - works as expected, red - does not support SVG

The result for mobile devices are very good for developers. Every tested browser, except Android Browser v. 2.2, supports basic SVG:
Chrome Mobile: 37, ..., 31
Android Browser: 4.0, 2.2
Mobile Safari: 5.1, 5.02, 4.0.5, 4.0.4


Mostly all popular browsers have support for basic inlined SVG:
  • simple graphics
  • SVG CSS from HTML <head> section
  • CSS inside SVG


Problematic browsers are Internet Explorer 6, 7, 8 and Android Mobile Browser 2.2, they are still popular, but do not support vector graphics at all.
Here is how Andoroid 2.2 renders simple SVG test page
Similar works IE version 8 or earlier and shows empty place.

Our next part is to test SVG browser support for graphic reusing with <defs> keyword.
Posted by at

1 comment:

Subscribe to: Post Comments (Atom)