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 1.0 recommendation was published in 2001.
  • Current stable version: 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 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 2.0 specification.

Contributing to SVG development

SVG is worked on by the SVG working group — see the 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/patterrnsvg/elements/polygon
svg/elements/polylinesvg/elements/radialGradientsvg/elements/rect
svg/elements/scriptsvg/elements/stopsvg/elements/style
svg/elements/svgsvg/elements/switchsvg/elements/symbol
svg/elements/textsvg/elements/textPathsvg/elements/textPositioning
svg/elements/titlesvg/elements/tspansvg/elements/use
svg/elements/viewsvg/elements (alphabetical order)svg/es
svg/eventssvg/events/errorsvg/events/load
svg/events/onabortsvg/events/onzoomsvg/events/resize
svg/events/scrollsvg/events/unloadsvg/methods
svg/methods/addListenersvg/methods/animationsPausedsvg/methods/appendItem
svg/methods/checkEnclosuresvg/methods/checkIntersectionsvg/methods/clear
svg/methods/consolidatesvg/methods/convertToSpecifiedUnitssvg/methods/create
svg/methods/createSVGAnglesvg/methods/createSVGLengthsvg/methods/createSVGMatrix
svg/methods/createSVGNumbersvg/methods/createSVGPathSegArcAbssvg/methods/createSVGPathSegArcRel
svg/methods/createSVGPathSegClosePathsvg/methods/createSVGPathSegCurvetoCubicAbssvg/methods/createSVGPathSegCurvetoCubicRel
svg/methods/createSVGPathSegCurvetoCubicSmoothAbssvg/methods/createSVGPathSegCurvetoCubicSmoothRelsvg/methods/createSVGPathSegCurvetoQuadraticAbs
svg/methods/createSVGPathSegCurvetoQuadraticRelsvg/methods/createSVGPathSegCurvetoQuadraticSmoothAbssvg/methods/createSVGPathSegCurvetoQuadraticSmoothRel
svg/methods/createSVGPathSegLinetoAbssvg/methods/createSVGPathSegLinetoHorizontalAbssvg/methods/createSVGPathSegLinetoHorizontalRel
svg/methods/createSVGPathSegLinetoRelsvg/methods/createSVGPathSegLinetoVerticalAbssvg/methods/createSVGPathSegLinetoVerticalRel
svg/methods/createSVGPathSegMovetoAbssvg/methods/createSVGPathSegMovetoRelsvg/methods/createSVGPoint
svg/methods/createSVGRectsvg/methods/createSVGTransformsvg/methods/createSVGTransformFromMatrix
svg/methods/deselectAllsvg/methods/dispatchEventsvg/methods/flipX
svg/methods/flipYsvg/methods/forceRedrawsvg/methods/getBBox
svg/methods/getCTMsvg/methods/getCharNumAtPositionsvg/methods/getComputedStyle
svg/methods/getComputedTextLengthsvg/methods/getCurrentTimesvg/methods/getElementById
svg/methods/getEnclosureListsvg/methods/getEndPositionOfCharsvg/methods/getExtentOfChar
svg/methods/getIntersectionListsvg/methods/getItemsvg/methods/getNumberOfChars
svg/methods/getPathSegAtLengthsvg/methods/getPointAtLengthsvg/methods/getRotationOfChar
svg/methods/getSVGDocumentsvg/methods/getScreenCTMsvg/methods/getStartPositionOfChar
svg/methods/getSubStringLengthsvg/methods/getTotalLengthsvg/methods/getTransformToElement
svg/methods/hasExtensionsvg/methods/initializesvg/methods/insertItemBefore
svg/methods/inversesvg/methods/itemsvg/methods/matrixTransform
svg/methods/multiplysvg/methods/newValueSpecifiedUnitssvg/methods/pauseAnimations
svg/methods/removeItemsvg/methods/removeListenersvg/methods/replaceItem
svg/methods/rotatesvg/methods/rotateFromVectorsvg/methods/scale
svg/methods/scaleNonUniformsvg/methods/selectSubStringsvg/methods/setCurrentTime
svg/methods/setFilterRessvg/methods/setMatrixsvg/methods/setOrientToAngle
svg/methods/setOrientToAutosvg/methods/setRotatesvg/methods/setScale
svg/methods/setSkewXsvg/methods/setSkewYsvg/methods/setStdDeviation
svg/methods/setTranslatesvg/methods/skewXsvg/methods/skewY
svg/methods/suspendRedrawsvg/methods/toStringsvg/methods/translate
svg/methods/unpauseAnimationssvg/methods/unsuspendRedrawsvg/methods/unsuspendRedrawAll
svg/objectssvg/objects/SVGAnglesvg/objects/SVGAnimatedAngle
svg/objects/SVGAnimatedBooleansvg/objects/SVGAnimatedEnumerationsvg/objects/SVGAnimatedInteger
svg/objects/SVGAnimatedLengthsvg/objects/SVGAnimatedLengthListsvg/objects/SVGAnimatedNumber
svg/objects/SVGAnimatedNumberListsvg/objects/SVGAnimatedPreserveAspectRatiosvg/objects/SVGAnimatedRect
svg/objects/SVGAnimatedStringsvg/objects/SVGAnimatedStringNSsvg/objects/SVGAnimatedTransformList
svg/objects/SVGComponentTransferFunctionElementsvg/objects/SVGElementsvg/objects/SVGElementInstance
svg/objects/SVGElementInstanceListsvg/objects/SVGExceptionsvg/objects/SVGLength
svg/objects/SVGLengthListsvg/objects/SVGMatrixsvg/objects/SVGNumber
svg/objects/SVGNumberListsvg/objects/SVGPathsvg/objects/SVGPathSeg
svg/objects/SVGPathSegArcAbssvg/objects/SVGPathSegArcRelsvg/objects/SVGPathSegClosePath
svg/objects/SVGPathSegCurvetoCubicAbssvg/objects/SVGPathSegCurvetoCubicRelsvg/objects/SVGPathSegCurvetoCubicSmoothAbs
svg/objects/SVGPathSegCurvetoCubicSmoothRelsvg/objects/SVGPathSegCurvetoQuadraticAbssvg/objects/SVGPathSegCurvetoQuadraticRel
svg/objects/SVGPathSegCurvetoQuadraticSmoothAbssvg/objects/SVGPathSegCurvetoQuadraticSmoothRelsvg/objects/SVGPathSegLinetoAbs
svg/objects/SVGPathSegLinetoHorizontalAbssvg/objects/SVGPathSegLinetoHorizontalRelsvg/objects/SVGPathSegLinetoRel
svg/objects/SVGPathSegLinetoVerticalAbssvg/objects/SVGPathSegLinetoVerticalRelsvg/objects/SVGPathSegList
svg/objects/SVGPathSegMovetoAbssvg/objects/SVGPathSegMovetoRelsvg/objects/SVGPoint
svg/objects/SVGPointListsvg/objects/SVGPreserveAspectRatiosvg/objects/SVGRect
svg/objects/SVGStringListsvg/objects/SVGTransformsvg/objects/SVGTransformList
svg/objects/SVGZoomsvg/objects/SVGZoomAndPansvg/properties
svg/properties/asvg/properties/alignsvg/properties/amplitude
svg/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/animatedInstanceRootsvg/properties/animatedNormalizedPathSegList
svg/properties/animatedPathSegListsvg/properties/animatedPointssvg/properties/azimuth
svg/properties/bsvg/properties/baseFrequencyXsvg/properties/baseFrequencyY
svg/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/csvg/properties/childNodes
svg/properties/classNamesvg/properties/clipPathsvg/properties/clipPathUnits
svg/properties/codesvg/properties/contentScriptTypesvg/properties/contentStyleType
svg/properties/correspondingElementsvg/properties/correspondingUseElementsvg/properties/currentScale
svg/properties/currentTranslatesvg/properties/currentViewsvg/properties/cx
svg/properties/cx (SVGRadialGradientElement)svg/properties/cysvg/properties/cy (SVGRadialGradientElement)
svg/properties/dsvg/properties/diffuseConstantsvg/properties/divisor
svg/properties/dxsvg/properties/dysvg/properties/e
svg/properties/edgeModesvg/properties/elevationsvg/properties/exponent
svg/properties/externalResourcesRequiredsvg/properties/fsvg/properties/farthestViewportElement
svg/properties/filtersvg/properties/filterResXsvg/properties/filterResY
svg/properties/filterUnitssvg/properties/firstChildsvg/properties/focusable
svg/properties/fxsvg/properties/fysvg/properties/gradientTransform
svg/properties/gradientUnitssvg/properties/heightsvg/properties/href
svg/properties/idsvg/properties/in1svg/properties/in2