SVG Code Snippets

Provides Scalable Vector Graphics (SVG) at versions 1.0, 1.1, 1.1 Basic and 1.1 Tiny. SVG provides a way to express 2-dimensional vector graphics that can be scalable, full alpha transparency, animated, search engine friendly, download friendly and accessible.

General editor notes or advisories within the snippets are contained within angle quotations: « ».

Version 2.0.0.1. Released: 2008-09-02.

References: SVG.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="300" height="400"> </svg>
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="400"> </svg>
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="basic" width="300" height="400"> </svg>
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="tiny" width="300" height="400"> </svg>
<svg id="" «requiredFeatures="" requiredExtensions="" systemLanguage="" style="" class=""» x="" y="" width="" height="" viewBox="0 0 5 5" preserveAspectRatio="xMidYMid meet" zoomAndPan="«disable / magnify»"> </svg>
<g id=""> </g>
<defs> </defs>
<title> </title>
<desc> </desc>
<metadata> </metadata>
<symbol> </symbol>
<use x="" y="" width="" height="" xlink:href="#idvalue"/>
<image xlink:type="simple" xlink:href="«image.png / image.jpg / image.svg»" xlink:title="" xlink:show="embed" xlink:actuate="onLoad" x="" y="" width="" height="" preserveAspectRatio=""></image>
<switch></switch>
<foreignObject id="" x="" y="" width="" height="" transform=""> </foreignObject>
<path d="M100,100 L50,50 L70,80 C100,200 200,200 200,10 S250,77 100,122 Q105,150 111,14 T55,103 A250,300 79 «0 / 1»,«0 / 1» 300,300 Z" pathLength=""/>
<rect x="" y="" width="" height="" rx="" ry=""/>
<circle cx="" cy="" r=""/>
<elipse cx="" cy="" rx="" ry=""/>
<line x1="" y1="" x2="" y2=""/>
<polyline points="100,100 200,100 250,150 300,78"/>
<polygon points="100,100 200,100 250,150 300,78"/>
<text x="" y="" dx="" dy="" rotate="" textLength="" lengthAdjust="«spacing / spacingAndGlyphs»"/>
<tspan x="" y="" dx="" dy="" rotate="" textLength="" lengthAdjust="«spacing / spacingAndGlyphs»"/>
<tref x="" y="" xlink:href="" dx="" dy="" rotate="" textLength="" lengthAdjust="«spacing / spacingAndGlyphs»"/>
<textPath startOffset="" textLength="" lengthAdjust="«spacing / spacingAndGlyphs»" method="«align / stretch»" spacing="«auto / exact»"/>
<marker viewBox="" preserveAspectRatio="" refX="" refY="" markerUnits="«strokeWidth / userSpaceOnUse»" markerWidth="" markerHeight="" orient="«auto / «angle»»"> </marker>
<font id="" horiz-origin-x="«number»" horiz-origin-y="«number»" horiz-adv-x="«number»" vert-origin-x="«number»" vert-origin-y="«number»" vert-adv-y="«number»"> </font>
<glyph unicode="" glyph-name="" d="" orientation="" arabic-form="" lang="" horiz-adv-x="«number»" vert-origin-x="«number»" vert-origin-y="«number»" vert-adv-y="«number»"></glyph>
<missing-glyph horiz-adv-x="«number»" vert-origin-x="«number»" vert-origin-y="«number»" vert-adv-y="«number»"></missing-glyph>
<hkern u1="«(number / range), (optionalNumber / optionalRange)...»" g1="«glyphName, optionalGlyphName, ...»" u2="«(number / range), (optionalNumber / optionalRange)...»" g2="«glyphName, optionalGlyphName, ...»" k="«number»"></hkern>
<vkern u1="«(number / range), (optionalNumber / optionalRange)...»" g1="«glyphName, optionalGlyphName, ...»" u2="«(number / range), (optionalNumber / optionalRange)...»" g2="«glyphName, optionalGlyphName, ...»" k="«number»"></vkern>
<font-face font-family="" font-style="«normal / italic / oblique»" font-variant="«normal / small-caps»" font-weight="«normal / bold / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900»" font-stretch="normal / ultra-condensed / extra-condensed / condensed / semi-condensed / semi-expanded / expanded / extra-expanded / ultra-expanded»" font-size="" unicode-range="«range, optionalRange»" units-per-em="«number»" panose-1="«int int int int int int int int int int»" stemv="«number»" stemh="«number»" slope="«number»" cap-height="«number»" x-height="«number»" accent-height="«number»" ascent="«number»" descent="«number»" widths="" bbox="" ideographic="«number»" alphabetic="«number»" mathematical="«number»" hanging="«number»" v-ideographic="«number»" v-alphabetic="«number»" v-mathematical="«number»" v-hanging="«number»" underline-position="«number»" underline-thickness="«number»" strikethrough-position="«number»" strikethrough-thickness="«number»" overline-position="«number»" overline-thickness="«number»"> </font-face>
<font-face-src> «<font-face-uri xlink:href=""><font-face-format string=""/></font-face-uri> / <font-face-name name=""/>» </font-face-src>
<definition-src xlink:href=""/>
<linearGradient id="" x1="" y1="" x2="" y2="" gradientUnits="«userSpaceOnUse / objectBoundingBox»" gradientTransform="" spreadMethod="«pad / reflect / repeat»"> </linearGradient>
<radialGradient id="" cx="" cy="" r="" fx="" fy="" gradientUnits="«userSpaceOnUse / objectBoundingBox»" gradientTransform="" spreadMethod="«pad / reflect / repeat»"> </radialGradient>
<stop offset="«int / real / %»" stop-color="«colour / currentColor»" stop-opacity="«0.0 - 1.0»"/>
<pattern id="" x="" y="" width="" height="" patternUnits="«userSpaceOnUse / objectBoundingBox»" patternContentUnits="«userSpaceOnUse / objectBoundingBox»" patternTransform=""> </pattern>
<clipPath x="" y="" width="" height="" maskUnits="«userSpaceOnUse / objectBoundingBox»" maskContentUnits="«userSpaceOnUse / objectBoundingBox»"> </clipPath>
<mask x="" y="" width="" height="" maskUnits="«userSpaceOnUse / objectBoundingBox»" maskContentUnits="«userSpaceOnUse / objectBoundingBox»"> </mask>
<filter id="" filterRes="«number optional-number»" filterUnits="«userSpaceOnUse / objectBoundingBox»" primativeUnits="«userSpaceOnUse / objectBoundingBox»" x="" y="" width="" height=""> </filter>
<feDistantLight id="" azimuth="" elevation=""/>
<fePointLight id="" x="" y="" z=""/>
<feSpotLight id="" x="" y="" z="" pointsAtX="" pointsAtY="" pointsAtZ="" specularExponent="" limitingConeAngle=""/>
<feBlend id="" in="" in2="" mode="«normal / multiply / screen / darken / lighten»"/>
<feColorMatrix id="" in="" type="«matrix / saturate / hueRotate / luminanceToAlpha»" values=""/>
<feComponentTransfer id="" in=""> «<feFuncR type="«identity / table / discrete / linear / gamma»" tableValues="" slope="" intercept="" amplitude="" exponent="" offset=""/> <feFuncG type="«identity / table / discrete / linear / gamma»" tableValues="" slope="" intercept="" amplitude="" exponent="" offset=""/> <feFuncB type="«identity / table / discrete / linear / gamma»" tableValues="" slope="" intercept="" amplitude="" exponent="" offset=""/> <feFuncA type="«identity / table / discrete / linear / gamma»" tableValues="" slope="" intercept="" amplitude="" exponent="" offset=""/>» </feComponentTransfer>
<feComposite id="" in="" in2="" operator="«over / in / out / atop / xor / arithmetic»" k1="" k2="" k3="" k4=""/>
<feConvolveMatrix id="" in="" order="«number optionalNumber»" kernelMatrix="" divisor="" bias="" targetX="«int»" targetY="«int»" edgeMode="«duplicate / wrap / none»" kernelUnitLength="«number optionalNumber»" preserveAlpha="«true / false»"/>
<feDiffuseLighting id="" in="" lighting-color="«colour»" surfaceScale="«number»" diffuseConstant="«number»" kernelUnitLength="«number optionalNumber»"> «<feDistantLight id="" azimuth="" elevation=""/> / <fePointLight id="" x="" y="" z=""/> / <feSpotLight id="" x="" y="" z="" pointsAtX="" pointsAtY="" pointsAtZ="" specularExponent="" limitingConeAngle=""/>» </feDiffuseLighting>
<feDisplacementMap id="" in="" in2="" scale="«number»" xChannelSelector="«R / G / B / A»" yChannelSelector="«R / G / B / A»"/>
<feFlood flood-color="«colour»" flood-opacity="«0.0 - 1.0»"/>
<feGaussianBlur id="" in="" stdDeviation="«number optionalNumber»"/>
<feImage id="" preserveAspectRatio="xMidYMid meet" xlink:type="simple" xlink:href="" xlink:show="embed" xlink:actuate="onLoad"/>
<feMerge> <feMergeNode in=""/> <feMergeNode in=""/> ... </feMerge>
<feMorphology operator="«erode / dilate»" radius="«number optionalNumber»"/>
<feOffset in="" dx="" dy=""/>
<feSpecularLighting in="" lighting-color="«colour»" surfaceScale="«number»" specularConstant="«number»" specularExponent="«number»" kernelUnitLength="«number optionalNumber»"> «<feDistantLight id="" azimuth="" elevation=""/> / <fePointLight id="" x="" y="" z=""/> / <feSpotLight id="" x="" y="" z="" pointsAtX="" pointsAtY="" pointsAtZ="" specularExponent="" limitingConeAngle=""/>» </feSpecularLighting>
<feTile in=""/>
<feTurbulence in="" baseFrequency="«number optionalNumber»" numOctaves="«int»" seed="«number»" stitchTiles="«stitch / noStitch»" type="«fractalNoise / turbulence»"/>
viewBox=""
preserveAspectRatio="xMidYMid meet"
xlink:href=""
width=""
height=""
fill="«paint»"
fill-role="«nonzero / evenodd / inherit»"
fill-opacity="«0.0 - 1.0 / inherit»"
stroke="«paint»"
stroke-width="«length / inherit»"
stroke-linecap="«butt / round / square / inherit»"
stroke-linejoin="«miter / round / bevel / inherit»"
stroke-miterlimit="«miterlimit / inherit»"
stroke-dasharray="«none / dasharray / inherit»"
stroke-dashoffset="«length / inherit»"
stroke-opacity="«0.0 - 1.0 / inherit»"
marker-start="«none / inherit / idOfMarkerElement»"
marker-mid="«none / inherit / idOfMarkerElement»"
marker-end="«none / inherit / idOfMarkerElement»"
color-interpolation="«auto / sRGB / linearRGB / inherit»"
color-interpolation-filters="«auto / sRGB / linearRGB / inherit»"
color-rendering="«auto / optimiseSpeed / optimiseQuality / inherit»"
shape-rendering="«auto / optimiseSpeed / crispEdges / geometricPrecision / inherit»"
text-rendering="«auto / optimiseSpeed / optimiseLegibility / geometricPrecision / inherit»"
image-rendering="«auto / optimiseSpeed / optimiseQuality / inherit»"
display="«inline / block / list-item / run-in / compact / marker / table / inline-table / table-row-group / table-header-group / table-footer-group / table-row / table-column-group / table-column / table-cell / table-caption / none / inherit»"
visibility="«visible / hidden / collapse / inherit»"
opacity="«0.0 - 1.0 / inherit»"
transform=""
clip-path=""
clip-rule=""
filter="«uri / none»"
in="«SourceGraphic / SourceAlpha / BackgroundImage / BackgroundAlpha / FillPaint / StrokePaint / «result value»»"
result=""
pointer-events="«visiblePainted / visibleFill / visibleStroke / visible / painted / fill / stroke / all / none / inherit»"
cursor="«(optionalURIs, auto / crosshair / default / pointer / move / e-resize / ne-resize / nw-resize / n-resize / se-resize / sw-resize / s-resize / w-resize / text / wait / help) / inherit»"
<a xlink:href="" xlink:type="simple" xlink:title="Link to somewhere" xlink:show="«new / replace»" xlink:actuate="onRequest" «target=""»> </a>
<cursor xlink:href="" x="" y=""> </cursor>
<animate attributeName="" attributeType="«XML / CSS»" begin="0s" dur="7s" from="" to=""/>
<set attributeName="" attributeType="«XML / CSS»" to="" begin="0s" dur="7s"/>
<animateMotion path="" begin="0s" dur="7s"/>
<animateColor attributeName="" attributeType="«XML / CSS»" from="" to="" begin="0s" dur="7s"/>
<animateTransform attributeName="" attributeType="«XML / CSS»" type="" from="" to="" begin="0s" dur="7s"/>
<script type="text/javascript" xlink:href=""></script>
onactivate=""
onclick=""
onmousedown=""
onmouseup=""
onmouseover=""
onmousemove=""
onmouseout=""
onabort=""
onerror=""
onresize=""
onscroll=""
onzoom=""
onfocusin=""
onfocusout=""
onload=""
onunload=""
onbegin=""
onend=""
onrepeat=""

Web-based Code Snippets are copywritten 2008 to Legend Scrolls and Peter Davison.
Web-based Code Snippets are licensed under the Creative Commons Attribution 3.0 Unported.