Chapter 8: Coordinate Systems, Transformations and Units
8.1. Introduction
All SVG content is drawn insideSVG viewports.Every SVG viewport defines a drawing region characterized by a size(width, height), and an origin, measured in abstractuser units.
Note that the term SVG viewport is distinct from the"viewport"term used in CSS.
Theinitial viewport is a top-levelSVG viewport that establishes a mapping between the coordinate system usedby the containing environment (for example, CSS pixels in web browsers)anduser units. Establishing an initial viewport is described in moredetail inThe initial viewport.
SVG viewports are only established by elements. SeeEstablishing a new SVG viewport for informationon which elements generate viewports.
Each SVG viewport generates aviewport coordinate systemand auser coordinate system, initially identical.Providing a‘viewBox’ on a viewport's element transforms the user coordinate systemrelative to the viewport coordinate system as described inThe‘viewBox’ attribute. Child elements of a viewport canfurther modify theuser coordinate system, for example by specifyingthetransform property.
SVG viewports can be nested. Percentage units are resolved with referenceto the width and height of the nearest ancestral SVG viewport. Hence, nestingSVG viewports provides an opportunity to redefine the meaning of percentageunits and provide a new reference rectangle for "fitting" a graphic relativeto a particular rectangular area.
The width, height and origin of SVG viewports is established by a negotiationprocess between the SVG document fragment generating the SVG viewport, and theparent of that fragment (whether real or implicit). SeeEstablishing a new SVG viewport for adescription of this negotiation process.
By default, a nested SVG viewport'sviewport coordinate system is equivalent to the localcoordinate system of the parent element, translated by the origin of the SVG viewport'selement. However, atransform property on an SVG viewport's element will modifytheviewport coordinate system relative to the parent element's user coordinate system.
Abstractly, all SVG viewports are embedded in thecanvas,a drawing region that is infinitely large in all relevant dimensions.
8.2. Computing the equivalent transform of an SVG viewport
This process converts the min-x, min-y, width and height values of a viewBox attribute,the position and size of the element on which the viewBox attribute is defined,and the value of the preserveAspectRatio attribute on that element into a translation anda scale that is applied to content contained by the element.
Letvb-x,vb-y,vb-width,vb-height be the min-x, min-y, width and height values of the viewBox attribute respectively.
Lete-x,e-y,e-width,e-height be the position and size of the element respectively.
Letalign be the align value of preserveAspectRatio, or 'xMidYMid' if preserveAspectRatio is not defined.
LetmeetOrSlice be the meetOrSlice value of preserveAspectRatio, or 'meet' if preserveAspectRatio is not defined or if meetOrSlice is missing from this value.
Initializescale-x toe-width/vb-width.
Initializescale-y toe-height/vb-height.
Ifalign is not 'none' andmeetOrSlice is 'meet', set the larger ofscale-x andscale-y to the smaller.
Otherwise, ifalign is not 'none' andmeetOrSlice is 'slice', set the smaller ofscale-x andscale-y to the larger.
The transform applied to content contained by the element is given bytranslate(translate-x,translate-y) scale(scale-x,scale-y).
8.3. The initial viewport
The initial viewport's width, must be the value of thewidthpresentation attribute on theoutermost svg element, unless thefollowing conditions are met:
the SVG content is a separately stored resource that is embedded by reference (such as the‘object’ element in HTML), or the SVG content is embedded inline within a containing document;
and the referencing element or containing document is styled using CSS [CSS2];
and there areCSS-compatible positioning properties ([CSS2], section 9.3) specified on the referencing element (e.g., the‘object’ element) or on the containing document'soutermost svg element that are sufficient to establish the width of the viewport.
Under these conditions, the viewport's width must be established via thepositioning properties.
Similarly, if there arepositioning propertiesspecified on the referencing element or on theoutermost svg element that aresufficient to establish the height of the viewport, then thesepositioning properties must establish the viewport's height;otherwise, the initial viewport's height must be the value of theheightpresentation attribute on theoutermost svg element.
If thewidth orheightpresentation attributes on theoutermost svg elementare inuser units (i.e., no unitidentifier has been provided), then the value is assumed to beequivalent to the same number of "px" units (seeUnits).
In the following example, an SVG graphic is embedded inlinewithin a parent XML document which is formatted using CSSlayout rules. Since CSS positioning properties are not providedon theoutermost svg element,thewidth="100px" andheight="200px" attributesdetermine the size of the initial viewport:
<?xml version="1.0" standalone="yes"?><parent xmlns="http://some.url"> <!-- SVG graphic --> <svg xmlns='http://www.w3.org/2000/svg' width="100px" height="200px"> <path d="M100,100 Q200,400,300,100"/> <!-- rest of SVG graphic would go here --> </svg></parent>
8.4. The initial coordinate system
For theoutermost svg element, the SVG useragent must determine an initialviewport coordinate system and aninitialuser coordinate system such that thetwo coordinates systems are identical. The origin of bothcoordinate systems must be at the origin of the SVG viewport, and oneunit in the initial coordinate system must equal oneCSS 2.1 px([CSS2], section 4.3.2)in the SVG viewport.In stand-alone SVG documents and in SVG document fragments embedded(by reference or inline) within parent documents where the parent'slayout is determined by CSS [CSS2],the initial viewportcoordinate system (and therefore the initial user coordinatesystem) must have its origin at the top/left of the viewport, withthe positive x-axis pointing towards the right, the positivey-axis pointing down, and text rendered with an "upright"orientation, which means glyphs are oriented such that Romancharacters and full-size ideographic characters for Asianscripts have the top edge of the corresponding glyphs orientedupwards and the right edge of the corresponding glyphs orientedto the right.
If the SVG implementation is part of a user agent whichsupports styling documents using CSS 2.1 compatiblepx units, then the SVG user agent should set itsinitial value for the size of apx unit in real worldunits to match the value used for other styling operations;otherwise, if the user agent can determine the size of apx unit from its environment, it should use thatvalue; otherwise, it should choose an appropriate size for onepx unit. In all cases, the size of apx mustbe in conformance withthe rules described in CSS 2.1([CSS2], section 4.3.2).
Example InitialCoords belowshows that the initial coordinate system has the origin at thetop/left with the x-axis pointing to the right and the y-axispointing down. The initial user coordinate system has one userunit equal to the parent (implicit or explicit) user agent's"pixel".
Transform on the‘svg’ element is a bit special due to the‘viewBox’ attribute. The transform should be applied as if the‘svg’ had a parent element with that transform set.
The‘viewBox’ attribute, in conjunction with the‘preserveAspectRatio’ attribute, provides the capability tostretch an SVG viewport to fit a particular container element.
The value of the‘viewBox’ attribute is a list of fournumbers<min-x>,<min-y>,<width> and<height>, separated bywhitespace and/or a comma, that specify a rectangle in userspace that should be mapped to the bounds of the SVG viewportestablished by the given element, taking into account the‘preserveAspectRatio’ attribute.The presence of the‘viewBox’ attribute results in a transformationbeing applied to the viewport coordinate system as described inComputing the equivalent transform of an SVG viewport.
A negative value for<width> or<height> is an error and invalidatesthe‘viewBox’ attribute. A value of zero disables rendering of theelement.
Example ViewBox illustratesthe use of the‘viewBox’ attributeon theoutermost svg element to specify thatthe SVG content should stretch to fit bounds of theSVG viewport.
<?xml version="1.0" standalone="no"?><svg width="300px" height="200px" viewBox="0 0 1500 1000" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <desc>Example ViewBox - uses the viewBox attribute to automatically create an initial user coordinate system which causes the graphic to scale to fit into the SVG viewport no matter what size the SVG viewport is.</desc> <!-- This rectangle goes from (0,0) to (1500,1000) in user coordinate system. Because of the viewBox attribute above, the rectangle will end up filling the entire area reserved for the SVG content. --> <rect x="0" y="0" width="1500" height="1000" fill="yellow" stroke="blue" stroke-width="12" /> <!-- A large, red triangle --> <path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/> <!-- A text string that spans most of the SVG viewport --> <text x="100" y="600" font-size="200" font-family="Verdana" > Stretch to fit </text></svg>
Example ViewBox
Rendered into SVG viewport with width=300px, height=200px
Rendered into SVG viewport with width=150px, height=200px
The effect of the‘viewBox’attribute is that the user agent automatically supplies theappropriate transformation matrix to map the specifiedrectangle in user coordinate system to the bounds of a designated region(often, the SVG viewport). To achieve the effect of the example onthe left, with SVG viewport dimensions of 300 by 200 pixels, theuser agent needs to automatically insert a transformation whichscales both X and Y by 0.2. The effect is equivalent to havingan SVG viewport of size 300px by 200px and the followingsupplemental transformation in the document, as follows:
<?xml version="1.0" standalone="no"?><svg width="300px" height="200px" xmlns="http://www.w3.org/2000/svg"><g transform="scale(0.2)"> <!-- Rest of document goes here --></g></svg>
To achieve the effect of the example on the right, withSVG viewport dimensions of 150 by 200 pixels, the user agent needsto automatically insert a transformation which scales X by 0.1and Y by 0.2. The effect is equivalent to having an SVG viewport ofsize 150px by 200px and the following supplementaltransformation in the document, as follows:
<?xml version="1.0" standalone="no"?><svg width="150px" height="200px" xmlns="http://www.w3.org/2000/svg"><g transform="scale(0.1 0.2)"> <!-- Rest of document goes here --></g></svg>
Note that in some cases the user agent will need to supply atranslate transformation in addition to ascale transformation. For example, on anoutermost svg element, atranslate transformation will be needed if the‘viewBox’ attributes specifiesvalues other than zero for<min-x> or<min-y>.
If bothtransform (or‘patternTransform’)and‘viewBox’ are applied to an element two new coordinatesystems are established.transform establishes the first newcoordinate system for the element.‘viewBox’establishes a second coordinate system for all descendants ofthe element. The first coordinate system is post-multiplied by thesecond coordinate system.
Unlike thetransform property,the automatic transformation that is createddue to a‘viewBox’ does not affectthe‘x’,‘y’,‘width’ and‘height’ attributes (or in the case ofthe‘marker’ element, the‘markerWidth’ and‘markerHeight’ attributes) on theelement with the‘viewBox’attribute. Thus, in the example above which shows an‘svg’ element which haswidth andheight presentation attributesand a‘viewBox’ attribute,thewidth andheightrepresent values in the coordinate system that existsbefore the‘viewBox’ transformation is applied. Onthe other hand, like thetransform property, it doesestablish a new coordinate system for all other attributes andfor descendant elements.
In some cases, typically when using the‘viewBox’ attribute, it is desirable that the graphics stretch tofit non-uniformly to take up theentire SVG viewport. In other cases, it is desirable that uniformscaling be used for the purposes of preserving the aspect ratioof the graphics.
For‘image’ elements,‘preserveAspectRatio’ indicates howreferenced images should be fitted with respect to thereference rectangle and whether the aspect ratio of thereferenced image should be preserved with respect to thecurrent user coordinate system.
The<align> parameterindicates whether to force uniform scaling and, if so, thealignment method to use in case the aspect ratio of the‘viewBox’ doesn't match the aspect ratio of the SVG viewport. The<align> parameter must be oneof the following strings:
none - Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the SVG viewport rectangle. (Note: if<align> isnone, then the optional<meetOrSlice> value is ignored.)
xMinYMin - Force uniform scaling. Align the<min-x> of the element's‘viewBox’ with the smallest X value of the SVG viewport. Align the<min-y> of the element's‘viewBox’ with the smallest Y value of the SVG viewport.
xMidYMin - Force uniform scaling. Align the midpoint X value of the element's‘viewBox’ with the midpoint X value of the SVG viewport. Align the<min-y> of the element's‘viewBox’ with the smallest Y value of the SVG viewport.
xMaxYMin - Force uniform scaling. Align the<min-x>+<width> of the element's‘viewBox’ with the maximum X value of the SVG viewport. Align the<min-y> of the element's‘viewBox’ with the smallest Y value of the SVG viewport.
xMinYMid - Force uniform scaling. Align the<min-x> of the element's‘viewBox’ with the smallest X value of the SVG viewport. Align the midpoint Y value of the element's‘viewBox’ with the midpoint Y value of the SVG viewport.
xMidYMid (theinitial value) - Force uniform scaling. Align the midpoint X value of the element's‘viewBox’ with the midpoint X value of the SVG viewport. Align the midpoint Y value of the element's‘viewBox’ with the midpoint Y value of the SVG viewport.
xMaxYMid - Force uniform scaling. Align the<min-x>+<width> of the element's‘viewBox’ with the maximum X value of the SVG viewport. Align the midpoint Y value of the element's‘viewBox’ with the midpoint Y value of the SVG viewport.
xMinYMax - Force uniform scaling. Align the<min-x> of the element's‘viewBox’ with the smallest X value of the SVG viewport. Align the<min-y>+<height> of the element's‘viewBox’ with the maximum Y value of the SVG viewport.
xMidYMax - Force uniform scaling. Align the midpoint X value of the element's‘viewBox’ with the midpoint X value of the SVG viewport. Align the<min-y>+<height> of the element's‘viewBox’ with the maximum Y value of the SVG viewport.
xMaxYMax - Force uniform scaling. Align the<min-x>+<width> of the element's‘viewBox’ with the maximum X value of the SVG viewport. Align the<min-y>+<height> of the element's‘viewBox’ with the maximum Y value of the SVG viewport.
The<meetOrSlice>parameter is optional and, if provided, is separated from the<align> value by one ormore spaces and then must be one of the following strings:
meet (the default) - Scale the graphic such that:
aspect ratio is preserved
the entire‘viewBox’ is visible within the SVG viewport
the‘viewBox’ is scaled up as much as possible, while still meeting the other criteria
In this case, if the aspect ratio of the graphic does not match the SVG viewport, some of the SVG viewport will extend beyond the bounds of the‘viewBox’ (i.e., the area into which the‘viewBox’ will draw will be smaller than the SVG viewport).
slice - Scale the graphic such that:
aspect ratio is preserved
the entire SVG viewport is covered by the‘viewBox’
the‘viewBox’ is scaled down as much as possible, while still meeting the other criteria
In this case, if the aspect ratio of the‘viewBox’ does not match the SVG viewport, some of the‘viewBox’ will extend beyond the bounds of the SVG viewport (i.e., the area into which the‘viewBox’ will draw is larger than the SVG viewport).
Including an‘svg’ element inside SVG contentcreates a new SVG viewport into which all containedgraphics are drawn; this implicitly establishes botha new viewport coordinate system and a new user coordinate system.Additionally, there is a new meaning for percentage units therein,because a new SVG viewport has been established(seeUnits).
The bounds of the new SVG viewport are defined by the‘x’,‘y’,‘width’ and‘height’ attributes on the elementestablishing the new SVG viewport, such as an‘svg’ element. Both the newviewport coordinate system and the new user coordinate systemhave their origins at (‘x’,‘y’), where‘x’ and‘y’represent the value of the corresponding attributes on theelement establishing the SVG viewport. The orientation of the newviewport coordinate system and the new user coordinate systemcorrespond to the orientation of the current user coordinatesystem for the element establishing the SVG viewport. A single unitin the new viewport coordinate system and the new usercoordinate system are the same size as a single unit in thecurrent user coordinate system for the element establishing the SVGviewport.
Here is an example:
<?xml version="1.0" standalone="no"?><svg width="4in" height="3in" xmlns="http://www.w3.org/2000/svg"> <desc>This SVG drawing embeds another one, thus establishing a new SVG viewport </desc> <!-- The following statement establishing a new SVG viewport and renders SVG drawing B into that SVG viewport --> <svg x="25%" y="25%" width="50%" height="50%"> <!-- drawing B goes here --> </svg></svg>
A‘symbol’ element that is instanced by a‘use’ element.
For historical reasons, the‘pattern’ and‘marker’ elements do not create a new viewport, despite accepting a‘viewBox’ attribute. Neither do the‘clipPath’ or‘mask’ elements. Percentage lengths within the content of these elements are not proportional to the dimensions of the graphical effect region.
The‘foreignObject’ element establishes a newCSS containing block for its child content. The same is true for a‘video’,‘audio’, or‘canvas’ element when its fallback content is being rendered. This has some effects similar to a new viewport, resetting the scope of layout for child content. However, in order to render SVG elements that are descendents of‘foreignObject’, a new‘svg’ element must establish an SVG document fragment and SVG viewport.
An‘image’ or‘iframe’ element creates a newdocument viewport for the referenced document. If the referenced document is a SVG file, it will of course establish its own SVG viewport.
Whether a new SVG viewport also establishes a new additionalclipping path is determined by the value of theoverflow property on the elementthat establishes the new SVG viewport.
8.9. Units
SVG follows the description and definition of common values andunits from the CSS Values and Units Module[css-values] for attributes,presentation attributes and CSS properties. Each attribute and propertymust specify the used component value type. Subsequent or extendingspecifications published by the CSS WG or SVG WG may extend basic datatypes or add new data types.
For<percentage> values that are defined to be relativeto the size of SVG viewport:
For any x-coordinate value or width value expressed as a percentage of theSVG viewport, the value to use must be the percentage, in user units, of the width parameter of the‘viewBox’ applied to that viewport. If no‘viewBox’ is specified, then the value to use must be the percentage, in user units, of the width of theSVG viewport.
For any y-coordinate value or height value expressed as a percentage of theSVG viewport, the value to use must be the percentage, in user units, of the height parameter of the‘viewBox’ applied to that viewport. If no‘viewBox’ is specified, then the value to use must be the percentage, in user units, of the height of theSVG viewport.
For any other length value expressed as a percentage of theSVG viewport, the percentage must be calculated as a percentage of the normalized diagonal of the‘viewBox’ applied to that viewport. If no‘viewBox’ is specified, then the normalized diagonal of theSVG viewport must be used. The normalized diagonal length must be calculated withsqrt((width)**2 + (height)**2)/sqrt(2).
Example Units belowillustrates some of the processing rules for different types ofunits.
The three rectangles on the left demonstrate the use of oneof the absolute unit identifiers, the "in" unit (inch). CSS defines 1inch to be equal to 96 pixels. Therefore, the topmost rectangle, which isspecified in inches, is exactly the same size as the middlerectangle, which is specified in user units such that there are96 user units for each corresponding inch in the topmostrectangle. The bottom rectangle of the group illustrateswhat happens when values specified in inches are scaled.
The three rectangles in the middle demonstrate the use ofone of the relative unit identifiers, the "em" unit. Becausethefont-size property has been setto150 on the outermost‘g’ element, each "em" unit isequal to 150 user units. The topmost rectangle, which isspecified in "em" units, is exactly the same size as the middlerectangle, which is specified in user units such that there are150 user units for each corresponding "em" unit in the topmostrectangle. The bottom rectangle of the group illustrates whathappens when values specified in "em" units are scaled.
The three rectangles on the right demonstrate the use ofpercentages. Note that the width and height of the SVG viewport inthe user coordinate system for the SVG viewport element (in thiscase, theoutermost svg element) are 4000 and2000, respectively, because processing the‘viewBox’ attribute results in atransformed user coordinate system. The topmost rectangle,which is specified in percentage units, is exactly the samesize as the middle rectangle, which is specified in equivalentuser units. In particular, note that thestroke-width property in themiddle rectangle is set to 1% of thesqrt((actual-width)**2 +(actual-height)**2) / sqrt(2), which in thiscase is .01*sqrt(4000*4000+2000*2000)/sqrt(2), or 31.62. Thebottom rectangle of the group illustrates what happens whenvalues specified in percentage units are scaled.
8.10. Bounding boxes
bounding box
The bounding box (or "bbox") of an element is the tightest fitting rectangle aligned with the axes of that element's user coordinate system that entirely encloses it and its descendants.
Three kinds of bounding boxes can be computed for an element:
Theobject bounding box is the bounding box that contains only an element's geometric shape. Forbasic shapes, this is the area that is filled. Unless otherwise specified, this is what is meant by the unqualified term "bounding box".
Thestroke bounding box is the bounding box that contains an element's geometric shape and itsstroke shape.
Thedecorated bounding box is the bounding box that contains an element's geometric shape, itsstroke shape and itsmarkers.
For curved shapes, the bounding box must enclose all portions of the shapealong the edge, not just end points. Note that control points for a curve whichare not defined as lying along the line of the resulting curve (e.g., the secondcoordinate pair of a Cubic Bézier command) must not contribute to the dimensionsof the bounding box (though those points may fall within the area of thebounding box, if they lie within the shape itself, or along or close to thecurve). For example, control points of a curve that are at a further distancethan the curve edge, from the non-enclosing side of the curve edge, must beexcluded from the bounding box.
The path'M20,50 L35,100 H120 V50 Q70,10 20,50' is shown in light blue. On the left, a correct object bounding box of the path is shown. Note that it does not include the top-most control point of the curve, but it does include all of the blue shape, even the parts that lie outside of the convex hull of the control points.
Even if an element is not in therendering tree – due to it being'display: none', within a‘defs’element, not usually rendered like a‘symbol’ element or notcurrently present in the document tree – it still has a bounding box.A call togetBBoxon the element will return the same rectangle as if the element wererendered. However, an element that is not in therendering treedoes not contribute to the bounding box of any ancestor element.
The following example defines a number of elements. The expectedobject bounding box for each element with an ID is shown below.
<svg xmlns="http://www.w3.org/2000/svg"> <title>Bounding Box Calculation</title> <desc>Examples of elements with different bounding box results based on context.</desc> <defs> <rect x="20" y="20" width="40" height="40" fill="blue" /> </defs> <g> <use href="#rect-1" x="10" y="10" /> <g display="none"> <rect x="10" y="10" width="100" height="100" fill="red" /> </g> </g></svg>
Element ID
Bounding Box Result
"defs-1"
{0, 0, 0, 0}
"rect-1"
{20, 20, 40, 40}
"group-1"
{30, 30, 40, 40}
"use-1"
{30, 30, 40, 40}
"group-2"
{10, 10, 100, 100}
"rect-2"
{10, 10, 100, 100}
Fortext content elements, for the purposes of the bounding boxcalculation, each glyph must be treated as a separate graphics element.The calculations must assume that all glyphs occupy thefull glyph cell.Thefull glyph cell must have widthequal to the horizontal advance and height equal to the EM box for horizontaltext. For vertical text that is typeset sideways, thefull glyph cell musthave width equal to the EM box and height equal to the horizontal advance.For other vertical text, thefull glyph cell must have width equal to theEM box and height equal to the vertical advance, or height equal to the heightof the EM box if no vertical advance is defined in the font.For example, for horizontal text, the calculations must assume that each glyphextends vertically to the full ascent and descent values for the font.
Because declarative or scripted animation can change the shape, size, andposition of an element, the bounding box is mutable. Thus, the bounding boxfor an element shall reflect the current values for the element at the snapshotin time at which the bounding box is requested, whether through a script callor as part of a declarative or linking syntax.
An element which has zero width, zero height, or both (such as avertical or horizontal line, or a‘rect’ element with a zerowidth orheight) still has a bounding box, with apositive value for the positive dimension, or with'0'for both the width and height if no positive dimension is specified. Similarly,subpaths segments of a‘path’ element with zero width and height must beincluded in that element's geometry for the sake of the bounding box.
An element with no position specified (such as a‘path’ element with a value ofnone for thed property) is positioned at thepoint (0,0) for the purposes of calculating a bounding box.
Note that elements whose DOM object does not derive fromSVGGraphicsElement(such as gradient elements) do not have a bounding box, and thus have nointerface to request a bounding box.
Elements in therendering tree which reference unresolved resources shallstill have a bounding box, defined by the position and dimensions specified intheir attributes, or by theinitial value for those attributes if novalues are supplied. For example, the element<use href="#bad" x="10" y="10"/>would have a bounding box with an x and y of 10 and a width and height of 0.
The following algorithm defines how to compute a bounding box for a givenelement. The inputs to the algorithm are:
element, the element we are computing a bounding box for;
space, a coordinate space in which the bounding box will be computed;
fill, a boolean indicating whether the bounding box includes the geometry of the element and its descendants;
stroke, a boolean indicating whether the bounding box includes the stroke of the element and its descendants;
markers, a boolean indicating whether the bounding box includes the markers of the element and its descendants; and
clipped, a boolean indicating whether the bounding box is affected by any clipping paths applied to the element and its descendants.
The algorithm to compute the bounding box is as follows, depending on the type ofelement:
Letbox be a rectangle initialized to (0, 0, 0, 0).
Letfill-shape be theequivalent path ofelement if it is ashape, or a shape that includes each of the glyph cells corresponding to the text within the elements otherwise.
Iffill is true, then setbox to the tightest rectangle in the coordinate systemspace that containsfill-shape.
Ifstroke is true and the element'sstroke is anything other thannone, then setbox to be the union ofbox and the tightest rectangle in coordinate systemspace that contains thestroke shape of the element, with the assumption that the element has no dash pattern.
Otherwise, setbox to be the union ofbox and the result of invoking the algorithm to compute a bounding box withchild as the element,space as the target coordinate space, true forfill,stroke andmarkers, andclipped forclipped.
Ifclipped is true and the value ofclip-path onelement is notnone, then setbox to be the tightest rectangle in coordinate systemspace that contains the intersection ofbox and the clipping path.
Otherwise, setbox to be the union ofbox and the result of invoking the algorithm to compute a bounding box withchild as the element and the same values forspace,fill,stroke,markers andclipped as the corresponding algorithm input values.
Ifclipped is true:
If the value ofclip-path onelement is notnone, then setbox to be the tightest rectangle in coordinate systemspace that contains the intersection ofbox and the clipping path.
If theoverflow property applies to theelement and does not have a value ofvisible, then setbox to be the tightest rectangle in coordinate systemspace that contains the intersection ofbox and the element's overflow bounds.
If theclip property applies to theelement and does not have a value ofauto, then setbox to be the tightest rectangle in coordinate systemspace that contains the intersection ofbox and the rectangle specified byclip.
Letbox be the tightest rectangle in coordinate spacespace that contains thepositioning rectangle defined by the‘x’,‘y’,‘width’ and‘height’ geometric properties of the element.
Thefill,stroke andmarkers input arguments to this algorithm do not affect the bounding box returned for these elements.
Ifclipped is true and the value ofclip-path onelement is notnone, then setbox to be the tightest rectangle in coordinate systemspace that contains the intersection ofbox and the clipping path.
Returnbox.
The unionbox with a value of (0, 0, 0, 0) and an empty shapeisbox.
The following elements offer the option of expressingcoordinate values and lengths as fractions (and, in some cases,percentages) of theobject bounding box,by setting a specified attribute to'objectBoundingBox'on the given element:
Indicates that the attributes which specify the gradient vector (‘x1’,‘y1’,‘x2’,‘y2’) represent fractions or percentages of the bounding box of the element to which the gradient is applied.
Indicates that the attributes which specify the center (‘cx’,‘cy’), the radius (‘r’) and focus (‘fx’,‘fy’) represent fractions or percentages of the bounding box of the element to which the gradient is applied.
Indicates that the attributes which define how to tile the pattern (‘x’,‘y’,‘width’,‘height’) are established using the bounding box of the element to which the pattern is applied.
Indicates that the user coordinate system for the contents of the pattern is established using the bounding box of the element to which the pattern is applied.
Indicates that the user coordinate system for the contents of the‘clipPath’ element is established using the bounding box of the element to which the clipping path is applied.
Indicates that the attributes which define the masking region (‘x’,‘y’,‘width’,‘height’) is established using the bounding box of the element to which the mask is applied.
Indicates that the user coordinate system for the contents of the‘mask’ element are established using the bounding box of the element to which the mask is applied.
Indicates that the attributes which define thefilter effects region (‘x’,‘y’,‘width’,‘height’) represent fractions or percentages of the bounding box of the element to which the filter is applied.
Indicates that the various length values within the filter primitives represent fractions or percentages of the bounding box of the element to which the filter is applied.
In the discussion that follows, the termapplicable elementis the element to which the given effect applies. For gradients andpatterns, the applicable element is thegraphics elementwhich has itsfill orstroke property referencing thegiven gradient or pattern. (For special rules concerningtext elements, see the discussion ofobjectbounding box units and text elements.) For clipping paths,masks and filters, the applicable element can be either acontainer element or agraphics element.
When keywordobjectBoundingBox is used, then theeffect is as if a supplemental transformation matrix wereinserted into the list of nested transformation matrices tocreate a new user coordinate system.
First, the (minx,miny) and(maxx,maxy) coordinates aredetermined by the extends of theobject bounding box ofthe applicable element.
Then, coordinate (0,0) in the new user coordinate system ismapped to the (minx,miny) corner of the tight bounding boxwithin the user coordinate system of the applicable element andcoordinate (1,1) in the new user coordinate system is mapped tothe (maxx,maxy) corner of the tight bounding box of theapplicable element. In most situations, the followingtransformation matrix produces the correct effect:
[ (maxx-minx) 0 0 (maxy-miny) minx miny ]
When percentages are used with attributes that define thegradient vector, the pattern tile, the filter region or themasking region, a percentage represents the same value as thecorresponding decimal value (e.g., 50% means the same as 0.5).If percentages are used within the content of a‘pattern’,‘clipPath’,‘mask’ or‘filter’ element, these valuesare treated according to the processing rules for percentagesas defined inUnits.
Any numeric value can be specified for values expressed as afraction or percentage of object bounding box units. Inparticular, fractions less are zero or greater than one andpercentages less than 0% or greater than 100% can bespecified.
KeywordobjectBoundingBoxshould not be used when the geometry of the applicable elementhas no width or no height, such as the case of a horizontal orvertical line, even when the line has actual thickness whenviewed due to having a non-zero stroke width since stroke widthis ignored for bounding box calculations. When the geometry ofthe applicable element has no width or height andobjectBoundingBox is specified, thenthe given effect (e.g., a gradient or a filter) will beignored.
With bitmap image formats, theintrinsic dimensions are fixed inthe image file, and the specified size is defined in the host document as neededto scale the image.SVG, being inherently scalable, adapts theintrinsic width andintrinsic height to be the width and height of thespecified size.Therefore, when specified as a length, thewidth andheight sizing properties of the‘svg’ element control theintrinsic dimensions of the SVG image and thespecified size thatis used when placing the SVG image in a host document.
Theintrinsic aspect ratio must be calculated using the followingalgorithm. If the algorithm returns null, then there is no intrinsic aspect ratio.
If thewidth andheight sizing properties on the‘svg’ element are both absolute values:
letviewbox be the viewbox defined by the active SVG View
returnviewbox.width /viewbox.height
If the‘viewBox’ on the‘svg’ element is correctly specified:
letviewbox be the viewbox defined by the‘viewBox’ attribute on the‘svg’ element
returnviewbox.width /viewbox.height
return null
The behaviour defined in this section is specific to CSS, but may be adaptedto other host contexts. In all host contexts, theintrinsic aspect ratio,where available, must be respected when sizing the SVG viewport.
In this example the intrinsic aspect ratio of the outermostSVG viewport is1:1. An aspect ratio calculation in this case allows embedding in anobject within a containing block that is only constrained in one direction.
Sometimes it is of interest to let the outline of an object keep itsoriginal width or to let the position of an object fix no matter whichtransforms are applied to it. For example, in a map with a 2px wide linerepresenting roads it is of interest to keep the roads 2px wide even when theuser zooms into the map, or introductory notes on the graphic chart in whichpanning is possible.
To offer such effects regarding special coordinate transformations andgraphic drawings, SVG Tiny 1.2 introduced thevector-effect property.Although SVG Tiny 1.2 introduced only non-scaling stroke behavior, this versionintroduces a number of additional effects. Furthermore, since these effectscan be specified in combination, they show more various effects. And, futureversions of the SVG language will allow for more powerful vector effectsthrough this property.
Values ofvector-effect other thannon-scaling-stroke andnone are at risk of being dropped from SVG 2 due to a lack of implementations. Feedback from implementers is requested, regarding the practicality of implementing them as currently specified, during the implementation period.
Specifies that no vector effect shall be applied, i.e. the default rendering behaviour from SVG 1.1 is used which is to first fill the geometry of a shape with a specified paint, then stroke the outline with a specified paint.
Specifies specialuser coordinate system toward this element and its descendant by constrained transformations with the following characteristics. The scale of theuser coordinate system do not change in spite of change ofCTMs from a host coordinate space. However, it does not specify the suppression of rotation and skew. Also, it does not specify the fixation of placement ofuser coordinate system. Since non-scaling-size suppresses scaling ofuser coordinate system, it also has the characteristic of non-scaling-stroke. The transformation formula and the example behavior are indicated to the following chapter.
non-rotation
Specifies specialuser coordinate system toward this element and its descendant by constrained transformations with the following characteristics. The rotation and skew of theuser coordinate system is suppressd in spite of change ofCTMs from a host coordinate space. However, it does not specify the suppression of scaling. Also, it does not specify the fixation of placement ofuser coordinate system. The transformation formula and the example behavior are indicated to the following chapter.
fixed-position
Specifies specialuser coordinate system toward this element and its descendant by constrained transformations with the following characteristics. The placement ofuser coordinate system is fixed in spite of change ofCTMs from a host coordinate space. However, it does not specify the suppression of rotation, skew and scaling. When the element that has fixed-position effect and also hastransform property, that property is consumed for this effect. The shift componentse andf of matrix oftransform property are used to transfer the origin of fixeduser coordinate system. The transformation formula and the example behavior are indicated to the following chapter.
These values can be enumerated. Thereby, the effect which has thesecharacteristics simultaneously can be specified.
The following two values assists the above-mentioned values. They show thehost coordinate space of constrained transformations. Especially it haseffective for the element belonging to nested viewport coordinate system suchas nested contents or nested‘svg’ elements. An initial value in caseit is not specified isviewport.
It specifies the coordinate system of content which under the immediate control ofuser agent. So to speak, it is "scrren" whichuser agent has. ("screen coordinate space" in SVGT1.2) Even if that element belongs to nested viewport coordinate system, that vector effect is always effective for change ofCTM of the any hierarchy. If the SVG implementation is part of auser agent which supports CSS compatible px units, it is a coordinate system on CSS pixel of rootmost content. Generally, the pixel (or dot) of a device and pixel of CSS are not always equal by influences of the zoom function whichuser agent itself has, and variation of dpi. (seeresolution [CSS Values and Units Module Level 3]) Accordingly, this value does not specify constrained transformations toward the such a device coordinate system.
Note: Future versions of SVG may allow ways to specify the device coordinate system.
8.13.1. Computing the vector effects
This section shows the list of transformation formulas regardingcombinations of the values for clarification of the behavior of vector effectsexcludingnon-scaling-stroke which has clearimplications.
When thevector-effect is added to an element like the above, thetransformation formula for user coordinate to the device coordinate changes asfollows. Here,xf andyf are usercoordinate of the corresponding element and its descendant. And,xo andyo are matrix elemente andf of the transform attribute which thecorresponding element has. In addition,|det(CTM)| is absolute value ofthe determinants ofCTM. When this value becomes 0 andnon-scaling-size is appointed,vector-effect becomes invalidity namelynone.
veValue
Formula
non-scaling-size
non-rotation
non-scaling-sizenon-rotation
fixed-position
fixed-positionnon-scaling-size
fixed-positionnon-rotation
fixed-positionnon-scaling-sizenon-rotation
8.13.2. Computing the vector effects for nested viewport coordinate systems
Below is normal coordinate transformation formula for nested viewportcoordinate systems without vector effects.xviewport(UA) andyviewport(UA) are coordinates which under the immediatecontrol ofuser agent.CTMthis isCTM for thetransformation matrix fromuser coordinate system of an target graphictoviewport coordinate system to which it belongs.CTMparent isCTM for the transformation matrix fromaforementionedviewport coordinate system toviewport coordinate systemof the parent of that. And,CTMroot isCTM forrootmost viewport coordinate system (UA).
When applying seven formulas of the preceding section to nested viewportcoordinate systems, the application way of those formulas changes as followsby whetherviewport orscreen is specified as the additional value ofvector-effect.
Whenviewport value is specified,user agent computes coordinates combining either of seven formulas ofthe preceding chapter, and the following formulas.
Whenscreen value is specified,user agent computes coordinates combining either of seven formulas ofthe preceding chapter, and the following formulas.
8.13.3. Examples of vector effects
Below is an example of thenon-scaling-strokevector-effect.
AnSVGTransform object can be designated asread only,which means that attempts to modify the object will result in an exceptionbeing thrown, as described below.
AnSVGTransform object can beassociatedwith a particular element. The associated element is used todetermine which element's‘transform’presentation attribute to update if the objectreflectsthat attribute. Unless otherwise described, anSVGTransform object isnot associated with any element.
EverySVGTransform object operates in one oftwo modes. It can:
reflect an element of a presentation attribute value (being exposed through the methods on thebaseVal member of anSVGAnimatedTransformList),
The numeric transform type constants defined onSVGTransform are usedto represent the type of anSVGTransform'svalue.Their meanings are as follows:
Constant
Meaning
SVG_TRANSFORM_MATRIX
Amatrix(…) value.
SVG_TRANSFORM_TRANSLATE
Atranslate(…) value.
SVG_TRANSFORM_SCALE
Ascale(…) value.
SVG_TRANSFORM_ROTATE
Arotate(…) value.
SVG_TRANSFORM_SKEWX
AskewX(…) value.
SVG_TRANSFORM_SKEWY
AskewY(…) value.
SVG_TRANSFORM_UNKNOWN
Some other type of value.
The use of numeric transform type constants is an anti-pattern andnew constant values will not be introduced for any transform types supported bySVGTransform. If other types of transforms are supported and used, theSVGTransformuses theSVG_TRANSFORM_UNKNOWNtype. See below for details on how the other properties of anSVGTransformoperate with these types of transforms.
Thetype IDL attribute representsthe type of transform item that theSVGTransform'svalue is.On gettingtype, the following stepsare run:
If theSVGTransform'svalue is amatrix(…),translate(…),scale(…),rotate(…),skewX(…) orskewY(…) function, then return the corresponding constant value from the transform type table above.
ThesetTranslate,setScale,setRotate,setSkewX andsetSkewY methods are usedto set theSVGTransform to a new transform functionvalue. When one of these methods is called,the following steps are run:
This specification imposes additional requirements on the behavior ofDOMMatrixobjects beyond those described in theGeometry Interfacesspecification, so that they can be used to reflect presentation attributesthat take transform values.
EveryDOMMatrix object operates in one of two modes.It can:
be detached, which is the case forDOMMatrix objects created using their constructor or withcreateSVGMatrix.
ADOMMatrix can be designated asread only,which means that attempts to modify the object will result in an exceptionbeing thrown. When assigning to any of a read onlyDOMMatrix'sIDL attributes, or when invoking any of its mutable transform methods,aNoModificationAllowedError exception will bethrowninstead of updating the internal value.
Note that this applies only to the read-writeDOMMatrixinterface; theDOMMatrixReadOnly interface, which is not used for reflectingtransform, will already throw an exception if an attempt is made to modify it.
When assigning to any of a writableDOMMatrix'sIDL attributes, or when invoking any of its mutable transform methods,the following steps are run after updating the internal matrix value:
If theDOMMatrix would return true from itsis2d method, then set theSVGTransform object'svalue to amatrix(…) value that represents the same matrix as theDOMMatrix.
Otherwise, set theSVGTransform object'svalue to amatrix3d(…) value that represents the same matrix as theDOMMatrix.
ThecreateSVGTransformFromMatrixmethod is used to create a newSVGTransform object from a matrix object.When the createSVGTransformFromMatrix(matrix) method is called,the following steps are run:
Follow the steps that would be run if thesetMatrix method ontransform were called, passingmatrix as its argument.
Returntransform.
Theconsolidatemethod is used to convert the transform list into an equivalenttransformation using a single transform function. When theconsolidate() method is called, the following steps are run:
Lettransform be a newly createdSVGTransform object.
Letmatrix be the matrix value obtained by beginning with an identity matrix, and then post-multiplying the value of thematrix object for eachSVGTransform in the list, in order.
Set the components oftransform'smatrix object to the component values inmatrix.
Iftransform'smatrix object would return true from itsis2d method, then settransform'svalue to amatrix(…) value that represents the same matrix as thematrix object.
Otherwise, settransform'svalue to amatrix3d(…) value that represents the same matrix as thematrix object.
ThebaseVal andanimVal IDL attributesrepresent the value of the reflected presentation attribute.On gettingbaseVal oranimVal, anSVGTransformList object is returned that reflects the givenpresentation attribute.
AnSVGPreserveAspectRatio object can be designated asread only,which means that attempts to modify the object will result in an exceptionbeing thrown, as described below.
The numeric alignment type constants defined onSVGPreserveAspectRatioare used to represent the alignment keyword values that‘preserveAspectRatio’can take. Their meanings are as follows:
Constant
Meaning
SVG_PRESERVEASPECTRATIO_NONE
Thenone keyword.
SVG_PRESERVEASPECTRATIO_XMINYMIN
ThexMinYMin keyword.
SVG_PRESERVEASPECTRATIO_XMIDYMIN
ThexMidYMin keyword.
SVG_PRESERVEASPECTRATIO_XMAXYMIN
ThexMaxYMin keyword.
SVG_PRESERVEASPECTRATIO_XMINYMID
ThexMinYMid keyword.
SVG_PRESERVEASPECTRATIO_XMIDYMID
ThexMidYMid keyword.
SVG_PRESERVEASPECTRATIO_XMAXYMID
ThexMaxYMid keyword.
SVG_PRESERVEASPECTRATIO_XMINYMAX
ThexMinYMax keyword.
SVG_PRESERVEASPECTRATIO_XMIDYMAX
ThexMidYMax keyword.
SVG_PRESERVEASPECTRATIO_XMAXYMAX
ThexMaxYMax keyword.
SVG_PRESERVEASPECTRATIO_UNKNOWN
Some other type of value.
Similarly, the numeric meet-or-slice type constants defined onSVGPreserveAspectRatio are used to represent the meet-or-slicekeyword values that‘preserveAspectRatio’ can take. Theirmeanings are as follows:
Constant
Meaning
SVG_MEETORSLICE_MEET
Themeet keyword.
SVG_MEETORSLICE_SLICE
Theslice keyword.
SVG_MEETORSLICE_UNKNOWN
Some other type of value.
Thealign IDL attributerepresents the alignment keyword part of the‘preserveAspectRatio’value. On getting, the following steps are run:
If the meet-or-slice value is not present invalue, then returnSVG_MEETORSLICE_MEET.
Otherwise, the meet-or-slice value is present. Return the constant value as specified in the meet-or-slice constant table above for the meet-or-slice keyword invalue.
On settingmeetOrSlice, thefollowing steps are run:
