canvg
examples
need a feature? have a bug or issue? svg not rendering? log it here!
Select an example ...
Select an example ...
soccer
world
tiger
butterfly
floorplan
all
layers
line
poly
path
curve
arcs
markers
linear
radial
radial focus
pattern
transform
indefinite
multiple
glyphs
external
masks
units
viewport
links
images
callback example
convert example
jsfiddle playground
Select an Issue:
Issue #3: radial gradient (broken)
Issue #8: stroke linecap
Issue #24: clipPath
Issue #25: stroke-linejoin
Issue #30: text-anchor
Issue #31: font-size
Issue #32: font-family
Issue #33: font-style
Issue #34: font-weight
Issue #35: gradient strokes
Issue #36: marker
Issue #38: tspan
Issue #39: tref
Issue #40: pattern
Issue #41: symbol
Issue #42: polyline marker
Issue #44: inner links
Issue #45: gradient transform (broken)
Issue #46: multi-line text
Issue #48: complex radial gradient
Issue #50: gradient changing paths
Issue #52: stroke dash support
Issue #54: path control points
Issue #55: clipPath
Issue #57: use and def
Issue #57b: complex gradient
Issue #66: gaussian blur
Issue #67: complex paths
Issue #70: bounding box (broken - missing shadow)
Issue #71: glyph
Issue #73: animation fill freeze
Issue #75: path command z
Issue #76: fill rule even odd
Issue #77: inherited stroke colors
Issue #79: use width height
Issue #82: external font
Issue #85: arabic glyphs
Issue #88: centered text
Issue #89: gradient transforms
Issue #91: opacity masks
Issue #94: visibility attribute
Issue #97: slow loading time
Issue #98: path error
Issue #99: tspan offset
Issue #104: linear gradient
Issue #106: gradient transform
Issue #112: marker orientation
Issue #114: text anchor
Issue #115: marker orientation
Issue #116: text dominant baseline
Issue #117: svg logo
Issue #121: ellipse animation
Issue #122: radial gradient (broken - don't scale)
Issue #125a: complex path and gradient
Issue #125b: complex path and gradient
Issue #128: markers (broken - don't align)
Issue #132: radial gradients (broken - don't scale)
Issue #134: positioning
Issue #135: gradient transform (broken)
Issue #137: positioning (broken)
Issue #138: image in pattern (broken)
Issue #142: stroke dash support
Issue #144: large complex
Issue #145: css id selector
Issue #158: complex w/ data images (broken - missing images in circles)
Issue #161: google chart gradient (svg error)
Issue #166: custom glyphs
Issue #172: cylinder gradient (broken - radial gradient off)
Issue #175: stroke width
Issue #176: rounded rectangles
Issue #178: pattern offset
Issue #179: animate rotate transform center
Issue #180: pattern x offset width (open)
Issue #181: linear gradient (broken - not appearing)
Issue #182: blur (broken - a bit off on intensity)
Issue #183: mask error (broken)
Issue #184: transformed pattern
Issue #187: nested tspans
Issue #195: gray filter
Issue #196: incorrect radial gradient
Issue #197: non smooth lines
Issue #202: text anchor middle
Issue #202b: text anchor middle
Issue #206: blur
Issue #211: transform
Issue #212: path shorthand quadratic bezier
Issue #217: advanced css support
Issue #227: clip path transform
Issue #229: text anchor from style
Issue #231: clip from style
Issue #234: use / symbol
Issue #234b: use / symbol
Issue #234c: use / symbol
Issue #234d: use / symbol
Issue #234e: use / symbol
Issue #238: improper clip context / FF stroke
Issue #241: feColorMatrix
Issue #244: text baseline
Issue #255: transform parsing
Issue #268: tspan dx dy not affecting x y
Issue #269: opacity in e-notation
Issue #273: fill freeze animation
Issue #282: treat clip path as attribute
Issue #289: multiple clip
Issue #322: path parsing
Issue #352: transform as style
Issue #358: patternTransform rotate offset
Issue #362: text tspan dx dy offset fixes
Issue #366: referenced gradients
Issue #372: referenced gradients
Issue #376: recurring css class definitions
or use your own
<svg><text x="50" y="50">Hello World!</text></svg>
width:
height:
canvg output
svg output