This project is read-only.


This page provides a short guide for use SVGRenderer. (After check-in 19827)

SVG File is mainly for HTML. You can either save it as file or grab it as string and put it under HTML file (With Asp.Net MVC).

SVG File will contain following tag:
<?xml version>
<SVG />

SVG String will contain one html tag only. Which is <svg/>

Method for SVGRenderer are similar to other renderer, but it will include one more attribute.

includeSize <<

SVG is Vector graph, what that attribute does is to make that graphic renderer base on its parent's size or its own size.

<div id="parent">
    <svg />

Above example, if that svg tag is output by includeSize = true, then QrCode size will be the size you have given to renderer. On the other hand, if includeSize = false, output svg code's size will depends on #parent's size.

For people don't really care about detail, that's all you have to know.

Detail description:

SVG HTML tag have some attribute which relate to how they display their size. Following is list that I have been using inside renderer.
  • viewBox
  • width
  • height

viewBox decides which area of vector graph you want to display. That will be fixed, which start from position 0, 0 and size will be 2 * quietZoneSize + number of module(width).

width and height are size attribute for svg. Default is auto, thus depends on its parent's size.

includeSize = true: Include width and height attribute with svg tag.
includeSize = false: Construct svg without width and height.

For background color, Currently I have include two different way to represent it. One as CSS style, the other is latest attribute spec for SVG tiny. Which is viewport-fill.

Most of desktop browser not recognize viewport-fill at moment. Thus I will leave both there for now and see what I am going to do with it later on.

Internet media type for svg is image/svg+xml. Which you should be using it inside header if you are sending away as file.

Currently SVGRenderer should be best choice for any ASP.Net project. Size is much smaller compare to other bitmap image (bigger than EPS, because of xml format) and support by all browser.

I have done a bit of work to make renderer to use least amount of rectangle to ouput QrCode, which should be a plus for size and browser render speed.

Please check out EPSRenderer documentation, as the way to use SVGRenderer are mostly same to EPSRnederer other than includeSize attribute. I will try to include more detailed documentation later.

Last edited Oct 22, 2012 at 6:46 AM by Silverlancer, version 1


No comments yet.