Solve the problem that HTML5 + JS development apps cannot display SVG and convert it to canvas)

The project uses the line chart and pie chart of Kendo UI dataviz to display some statistical information. SVG is used for the display of these graphs.

Currently, the latest chrome, Safari, and Moz support SVG tags, and even safari in the iPhone support SVG.

However, Android only supports SVG by version 3.0 or later. If it is not 3.0 or later, you must upgrade the browser kernel to display it.

There is a solution to convert SVG to canvas and then display it. Used the canvg-1.2 library provided by Google.

 

Specific solution example:

First, check whether the browser supports SVG. Here we use the modernizr judgment method. If yes, this function returns true; otherwise, false:

function testSVG(){    var ns = {'svg': 'http://www.w3.org/2000/svg'};    return !!document.createElementNS && !!document.createElementNS(ns.svg, 'svg').createSVGRect;}

 

After making the judgment, the image can be dynamically loaded. If SVG is supported, it is OK to directly use the SVG tag. Otherwise, the SVG tag must be converted to canvas for display.

Canvg is required to convert SVG to canvas. It can be downloaded at http://code.google.com/p/canvg/or connected to a Google Server:

　　

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 

 

 

There are two ways to use (written on the Google website ):

<script type="text/javascript">window.load = function() {  //load '../path/to/your.svg' in the canvas with id = 'canvas'  canvg('canvas', '../path/to/your.svg')  //load a svg snippet in the canvas with id = 'drawingArea'  canvg(document.getElementById('drawingArea'), '<svg>...</svg>')  //ignore mouse events and animation  canvg('canvas', 'file.svg', { ignoreMouse: true, ignoreAnimation: true }) }</script>

 

Here I use the second method, that is, converting the HTML string of the SVG tag into a canvas.

 

First, you must obtain the HTML of the whole SVG tag of the SVG image drawn by Kendo UI dataviz. Add the HTML of the SVG tag to the canvg function.

For details, refer to the demo below. Use kendochart to draw SVG images, and then determine whether the browser supports SVG. If not, obtain the entire HTML of the SVG tag and use canvg for conversion. (Chart data is demo data using Kendo UI chart)

　　

HTML:

　　

<div id="chart"></div>

 

　　

JS (dependent on jquery ):

// Create chart $ ("# Chart "). kendochart ({theme: $ (document ). data ("kendoskin") | "default", Title: {text: "break-up of Spain atomicity production for 2008"}, Legend: {position: "bottom ", labels: {template: "# = text # (# = value # %)" }}, seriesdefaults: {labels: {visible: True, format: "{0 }%" }}, series: [{type: "pie", data: [{category: "Hydro", value: 22 },{ category: "Solar", value: 2 },{ Category: "nuclear", value: 49 },{ category: "wind", value: 27}], tooltip: {visible: True, format: "{0} %"}); // determines whether SVG/* If (! Testsvg () {var svgtaghtml =$ ("# Chart "). data ("kendochart "). SVG (); var canvashtml = '<canvas id = "kendochart_canvas"> </canvas>'; $ ("# Chart" (.empty().html (canvashtml); canvg (document. getelementbyid ('kendochart _ canvas '), svgtaghtml);} * // change SVG tag to canvas tag // get SVG tag HTML //. the data method is imported into the chart type. if it is kendoradialgauge, then. data is passed in 'endoradialgauge'; var svgtaghtml =$ ("# Chart "). data ("kendochart "). SVG (); var canvashtml = '<canvas id = "kendochart_canvas"> </canvas>'; $ ("# Chart" (.empty().html (canvashtml); canvg (document. getelementbyid ('kendochart _ canvas '), svgtaghtml );});

 

 

If you annotate the last four lines of code, you can obtain the SVG image. If you do not comment out the last four lines of code, you can get the canvas. (Here we need to execute kendochart to draw SVG, in order to get the SVG tag HTML of the image, so far I have not found a better solution ).

　　

Annotate the conversion code (SVG tag ):

 

 

Without commenting on the conversion code (canvas tag ):

 

 

The two tags have the same effect:

Defect: no matter whether the browser supports SVG or not, you need to execute kendochart to draw SVG to get the SVG tag HTML of the image. Now I have not found a better solution.

There is still a problem when iscroll is used with canvas. We need to study the third parameter of the canvas label and canvg method.