svg

Jump to: navigation, search

SVG

Summary

Scalable Vector Graphics (SVG) is an XML markup language for structurally describing two-dimensional vector graphics. In essence, SVG is to graphics what HTML is to text. SVG is a W3C recommendation and is explicitly designed to work with other W3C standards such as HTML, CSS or DOM.

Language: English  • español

Explore our SVG docs

SVG learning material

Tutorials and concept articles to teach you SVG from the ground up.

Elements

A reference guide to SVG and related elements.


Attributes

A reference guide to all the available SVG attributes.

Objects

A reference guide to all the available SVG objects.

Methods

A reference guide to all the available SVG methods.

Properties

A reference guide to all the available SVG properties.


Note: If you are completely new to web development, you may want to review Web development for beginners.

Background

SVG was first worked on in 1998, in an attempt to create a standardised vector graphics markup language for browsers to follow (proprietary technologies at the time included Microsoft's VML and Sun/Adobe's PGML.)

  • First version: The first version to be standardised was SVG 1.0. The SVG 1.0 recommendation was published in 2001.
  • Current stable version: SVG 1.1 is the current stable implementation supported across modern browsers, first published in 2003. There are also some SVG offshoots with different purposes, such as SVG Tiny 1.2, but for reference you should stick to SVG 1.1.
  • Current and future work: SVG 1.2 development has been dropped in favour of the upcoming SVG 2.0 specification.

Contributing to SVG development

SVG is worked on by the SVG working group — see the SVG WG homepage for more details, including mailing list details for feedback and contributing.


Index of all SVG topics

svg/attributessvg/attributes/alignment-baselinesvg/attributes/baseline-shift
svg/attributes/clip-rulesvg/attributes/color-interpolation-filterssvg/attributes/dominant-baseline
svg/attributes/enable-backgroundsvg/attributes/fillsvg/attributes/fill-opacity
svg/attributes/fill-rulesvg/attributes/flood-colorsvg/attributes/flood-opacity
svg/attributes/glyph-orientation-horizontalsvg/attributes/glyph-orientation-verticalsvg/attributes/kerning
svg/attributes/lighting-colorsvg/attributes/markersvg/attributes/marker-end
svg/attributes/marker-midsvg/attributes/marker-startsvg/attributes/mask
svg/attributes/pointerssvg/attributes/stop-colorsvg/attributes/stop-opacity
svg/attributes/strokesvg/attributes/stroke-dasharraysvg/attributes/stroke-dashoffset
svg/attributes/stroke-linecapsvg/attributes/stroke-linejoinsvg/attributes/stroke-miterlimit
svg/attributes/stroke-opacitysvg/attributes/stroke-widthsvg/attributes/text-anchor
svg/browser supportsvg/data typessvg/elements
svg/elements/asvg/elements/circlesvg/elements/clipPath
svg/elements/defssvg/elements/descsvg/elements/ellipse
svg/elements/etextContentsvg/elements/feBlendsvg/elements/feColorMatrix
svg/elements/feComponentTransfersvg/elements/feComposite
svg/elements/feConvolveMatrixsvg/elements/feDiffuseLightingsvg/elements/feDisplacementMap
svg/elements/feDistantLightsvg/elements/feFloodsvg/elements/feFuncA
svg/elements/feFuncBsvg/elements/feFuncG
svg/elements/feFuncRsvg/elements/feGaussianBlursvg/elements/feImage
svg/elements/feMergesvg/elements/feMergeNodesvg/elements/feMorphology
svg/elements/feOffsetsvg/elements/fePointLightsvg/elements/feSpecularLighting
svg/elements/feSpotlightsvg/elements/feTilesvg/elements/feTurbulence
svg/elements/filtersvg/elements/gsvg/elements/gradient
svg/elements/imagesvg/elements/linesvg/elements/linearGradient
svg/elements/markersvg/elements/masksvg/elements/metadata
svg/elements/pathsvg/elements/pattern
svg/elements/polygonsvg/elements/polylinesvg/elements/radialGradient
svg/elements/rectsvg/elements/scriptsvg/elements/stop
svg/elements/stylesvg/elements/svgsvg/elements/switch
svg/elements/symbolsvg/elements/textsvg/elements/textPath
svg/elements/textPositioningsvg/elements/titlesvg/elements/tspan
svg/elements/usesvg/elements/viewsvg/elements (alphabetical order)
svg/essvg/eventssvg/events/error
svg/events/loadsvg/events/onabortsvg/events/onzoom
svg/events/resizesvg/events/scrollsvg/events/unload
svg/methodssvg/methods/addListenersvg/methods/animationsPaused
svg/methods/appendItemsvg/methods/checkEnclosuresvg/methods/checkIntersection
svg/methods/clearsvg/methods/consolidatesvg/methods/convertToSpecifiedUnits
svg/methods/createsvg/methods/createSVGAnglesvg/methods/createSVGLength
svg/methods/createSVGMatrixsvg/methods/createSVGNumbersvg/methods/createSVGPathSegArcAbs
svg/methods/createSVGPathSegArcRelsvg/methods/createSVGPathSegClosePathsvg/methods/createSVGPathSegCurvetoCubicAbs
svg/methods/createSVGPathSegCurvetoCubicRelsvg/methods/createSVGPathSegCurvetoCubicSmoothAbssvg/methods/createSVGPathSegCurvetoCubicSmoothRel
svg/methods/createSVGPathSegCurvetoQuadraticAbssvg/methods/createSVGPathSegCurvetoQuadraticRelsvg/methods/createSVGPathSegCurvetoQuadraticSmoothAbs
svg/methods/createSVGPathSegCurvetoQuadraticSmoothRelsvg/methods/createSVGPathSegLinetoAbssvg/methods/createSVGPathSegLinetoHorizontalAbs
svg/methods/createSVGPathSegLinetoHorizontalRelsvg/methods/createSVGPathSegLinetoRelsvg/methods/createSVGPathSegLinetoVerticalAbs
svg/methods/createSVGPathSegLinetoVerticalRelsvg/methods/createSVGPathSegMovetoAbssvg/methods/createSVGPathSegMovetoRel
svg/methods/createSVGPointsvg/methods/createSVGRectsvg/methods/createSVGTransform
svg/methods/createSVGTransformFromMatrixsvg/methods/deselectAllsvg/methods/dispatchEvent
svg/methods/flipXsvg/methods/flipYsvg/methods/forceRedraw
svg/methods/getBBoxsvg/methods/getCTMsvg/methods/getCharNumAtPosition
svg/methods/getComputedStylesvg/methods/getComputedTextLengthsvg/methods/getCurrentTime
svg/methods/getElementByIdsvg/methods/getEnclosureListsvg/methods/getEndPositionOfChar
svg/methods/getExtentOfCharsvg/methods/getIntersectionListsvg/methods/getItem
svg/methods/getNumberOfCharssvg/methods/getPathSegAtLengthsvg/methods/getPointAtLength
svg/methods/getRotationOfCharsvg/methods/getSVGDocumentsvg/methods/getScreenCTM
svg/methods/getStartPositionOfCharsvg/methods/getSubStringLengthsvg/methods/getTotalLength
svg/methods/getTransformToElementsvg/methods/hasExtensionsvg/methods/initialize
svg/methods/insertItemBeforesvg/methods/inversesvg/methods/item
svg/methods/matrixTransformsvg/methods/multiplysvg/methods/newValueSpecifiedUnits
svg/methods/pauseAnimationssvg/methods/removeItemsvg/methods/removeListener
svg/methods/replaceItemsvg/methods/rotatesvg/methods/rotateFromVector
svg/methods/scalesvg/methods/scaleNonUniformsvg/methods/selectSubString
svg/methods/setCurrentTimesvg/methods/setFilterRessvg/methods/setMatrix
svg/methods/setOrientToAnglesvg/methods/setOrientToAutosvg/methods/setRotate
svg/methods/setScalesvg/methods/setSkewXsvg/methods/setSkewY
svg/methods/setStdDeviationsvg/methods/setTranslatesvg/methods/skewX
svg/methods/skewYsvg/methods/suspendRedrawsvg/methods/toString
svg/methods/translatesvg/methods/unpauseAnimationssvg/methods/unsuspendRedraw
svg/methods/unsuspendRedrawAllsvg/objectssvg/objects/SVGAngle
svg/objects/SVGAnimatedAnglesvg/objects/SVGAnimatedBooleansvg/objects/SVGAnimatedEnumeration
svg/objects/SVGAnimatedIntegersvg/objects/SVGAnimatedLengthsvg/objects/SVGAnimatedLengthList
svg/objects/SVGAnimatedNumbersvg/objects/SVGAnimatedNumberListsvg/objects/SVGAnimatedPreserveAspectRatio
svg/objects/SVGAnimatedRectsvg/objects/SVGAnimatedStringsvg/objects/SVGAnimatedStringNS
svg/objects/SVGAnimatedTransformListsvg/objects/SVGComponentTransferFunctionElementsvg/objects/SVGElement
svg/objects/SVGElementInstancesvg/objects/SVGElementInstanceListsvg/objects/SVGException
svg/objects/SVGLengthsvg/objects/SVGLengthListsvg/objects/SVGMatrix
svg/objects/SVGNumbersvg/objects/SVGNumberListsvg/objects/SVGPath
svg/objects/SVGPathSegsvg/objects/SVGPathSegArcAbssvg/objects/SVGPathSegArcRel
svg/objects/SVGPathSegClosePathsvg/objects/SVGPathSegCurvetoCubicAbssvg/objects/SVGPathSegCurvetoCubicRel
svg/objects/SVGPathSegCurvetoCubicSmoothAbssvg/objects/SVGPathSegCurvetoCubicSmoothRelsvg/objects/SVGPathSegCurvetoQuadraticAbs
svg/objects/SVGPathSegCurvetoQuadraticRelsvg/objects/SVGPathSegCurvetoQuadraticSmoothAbssvg/objects/SVGPathSegCurvetoQuadraticSmoothRel
svg/objects/SVGPathSegLinetoAbssvg/objects/SVGPathSegLinetoHorizontalAbssvg/objects/SVGPathSegLinetoHorizontalRel
svg/objects/SVGPathSegLinetoRelsvg/objects/SVGPathSegLinetoVerticalAbssvg/objects/SVGPathSegLinetoVerticalRel
svg/objects/SVGPathSegListsvg/objects/SVGPathSegMovetoAbssvg/objects/SVGPathSegMovetoRel
svg/objects/SVGPointsvg/objects/SVGPointListsvg/objects/SVGPreserveAspectRatio
svg/objects/SVGRectsvg/objects/SVGStringListsvg/objects/SVGTransform
svg/objects/SVGTransformListsvg/objects/SVGZoomsvg/objects/SVGZoomAndPan
svg/propertiessvg/properties/asvg/properties/align
svg/properties/amplitudesvg/properties/anglesvg/properties/animVal (SVGAnimatedAngle)
svg/properties/animVal (SVGAnimatedBoolean)svg/properties/animVal (SVGAnimatedEnumeration)svg/properties/animVal (SVGAnimatedInteger)
svg/properties/animVal (SVGAnimatedLength)svg/properties/animVal (SVGAnimatedLengthList)svg/properties/animVal (SVGAnimatedNumber)
svg/properties/animVal (SVGAnimatedNumberList)svg/properties/animVal (SVGAnimatedPreserveAspectRatio)svg/properties/animVal (SVGAnimatedRect)
svg/properties/animVal (SVGAnimatedString)svg/properties/animVal (SVGAnimatedTransformList)svg/properties/animatedInstanceRoot
svg/properties/animatedNormalizedPathSegListsvg/properties/animatedPathSegListsvg/properties/animatedPoints
svg/properties/azimuthsvg/properties/bsvg/properties/baseFrequencyX
svg/properties/baseFrequencyYsvg/properties/baseVal (SVGAnimatedAngle)svg/properties/baseVal (SVGAnimatedBoolean)
svg/properties/baseVal (SVGAnimatedEnumeration)svg/properties/baseVal (SVGAnimatedInteger)svg/properties/baseVal (SVGAnimatedLength)
svg/properties/baseVal (SVGAnimatedLengthList)svg/properties/baseVal (SVGAnimatedNumber)svg/properties/baseVal (SVGAnimatedNumberList)
svg/properties/baseVal (SVGAnimatedPreserveAspectRatio)svg/properties/baseVal (SVGAnimatedRect)svg/properties/baseVal (SVGAnimatedString)
svg/properties/baseVal (SVGAnimatedTransformList)svg/properties/biassvg/properties/c
svg/properties/childNodessvg/properties/classNamesvg/properties/clipPath
svg/properties/clipPathUnitssvg/properties/codesvg/properties/contentScriptType
svg/properties/contentStyleTypesvg/properties/correspondingElementsvg/properties/correspondingUseElement
svg/properties/currentScalesvg/properties/currentTranslatesvg/properties/currentView
svg/properties/cxsvg/properties/cx (SVGRadialGradientElement)svg/properties/cy
svg/properties/cy (SVGRadialGradientElement)svg/properties/dsvg/properties/diffuseConstant
svg/properties/divisorsvg/properties/dxsvg/properties/dy
svg/properties/esvg/properties/edgeModesvg/properties/elevation
svg/properties/exponentsvg/properties/externalResourcesRequiredsvg/properties/f
svg/properties/farthestViewportElementsvg/properties/filtersvg/properties/filterResX
svg/properties/filterResYsvg/properties/filterUnitssvg/properties/firstChild
svg/properties/focusablesvg/properties/fxsvg/properties/fy
svg/properties/gradientTransformsvg/properties/gradientUnitssvg/properties/height
svg/properties/hrefsvg/properties/idsvg/properties/in1