canvg
examples
need a feature? have a bug or issue? svg not rendering? log it here!
Select an example...
Or use your own:
Options:
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
textPath
masks
units
viewport
links
images
favicon
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 #108: non-scaling-stroke
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
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 #277: pattern parent opacity
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
Issue #510: nested opacity
Issue #610: rounded rectangle corner bezier
Issue #454: stroke dash offset on a line
Issue #454b: stroke dash offset on a line
Issue #473: stroke dash on arc
Issue #615: transform on clip
Issue #342: text gradient
Issue #620: em font size
Issue #320: rem font size
Issue #564: tspan text-anchor
Issue #556: mask using alpha
Issue #717: em font size
Issue #406: refX and refY is invalid when draw the marker
Issue #690: vh, vw, vmin, vmax
Issue #694: support forward references in use elements
Issue #713: scale 0 not applied
Issue #735: Incorrect refX, refY and viewport clip
Issue #748: relative font-sizes
Issue #750: em stack
Issue #757: transform-origin css
Issue #782a: Incorrect text-anchor, dx, dy, x and y
Issue #782b: Incorrect text-anchor, dx, dy, x and y
Issue #816: Handle empty bounding box
Issue #832: Correct translate parsing
Issue #870: image loading
Issue #869: box size from styles
Issue #941: check ellipse radiuses
Issue #747: check filter size before draw
Issue #945: default currentColor
Issue #946: invalid path tokenizer
Issue #897: invalid transform on element with filter
Issue #897: invalid transform on element with mask
Issue #908: css imports
Issue #1001: incorrect rect sizing
Issue #1045: overflow visible style
Issue #1063: opacity in use symbol
Issue #1111: unable to darken with feColorMatrix
Issue #977: transform origin
Issue #1196: path parser
Issue #1161: textPath with dx and dy
Issue #1364: path parser
Issue #1460: matrix transform origin
Issue #1516: pseudo node styles
<svg><text x="50" y="50">Hello World!</text></svg>
width:
height:
preserveAspectRatio:
resize:
Render
Redraw:
V3:
V3 OffscreenCanvas:
V2:
Canvg output:
SVG output: