SVG 1.1 HTML

Four separate rectangles Two groups, each of two rectangles Four separate rectangles Two groups, each of two rectangles Groups can nest Style inheritance and the use element Two circles, one of which is a re-styled clone of the other. This file demonstrates one of the cases where the shadow-DOM style matching rules in SVG 2 have a different effect than the SVG 1.1 style cloning rules. The original circle on the left should have blue fill and green stroke. In a conforming SVG 1.1 user agent, the re-used circle on the right should have orange fill and green stroke. In a conforming SVG 2 user agent, the re-used circle should have orange fill and purple stroke. In all cases, the stroke should be partially transparent and 20 units wide, relative to a total circle diameter of 100 units. Local URI references within ancestor's 'defs' element. This is an example SVG file The global description uses markup from the mydoc namespace. Example Use01 - Simple case of 'use' on a 'rect' Example Use01-GeneratedContent - Simple case of 'use' on a 'rect' Example Use02 - 'use' on a 'symbol' MySymbol - four rectangles in a grid Example Use02-GeneratedContent - 'use' on a 'symbol' Example Use03 - 'use' with a 'transform' attribute Example Use03-GeneratedContent - 'use' with a 'transform' attribute Example Use04 - 'use' with CSS styling Example Use04-GeneratedContent - 'use' with a 'transform' attribute This graphic links to an external image My image Variable declared twice Undeclared variable Bad syntax for variable name Variable déclarée deux fois Variable indéfinie Erreur de syntaxe pour variable Example InitialCoords - SVG's initial coordinate system (0,0) (300,0) (0,100) Example OrigCoordSys - Simple transformations: original picture ABC (orig coord system) Example NewCoordSys - New user coordinate system ABC (orig coord system) ABC (translated coord system) Example RotateScale - Rotate and scale transforms ABC (rotate) ABC (scale) Example Skew - Show effects of skewX and skewY ABC (skewX) ABC (skewY) Example Nested - Nested transformations ....Translate(1) ....Rotate(2) ....Translate(3) An example that references coordinate data. Example using a well known coordinate system. 4326 EPSG 5.2 Coordinate metadata defined within the SVG document Mercator projection of WGS84 2 north 9108 EPSG 5.2 east 9108 EPSG 5.2 WGS 84 4326 EPSG 5.2 2 2 Mercator 9805 EPSG 5.2 Mercator (2SP) Latitude of 1st standart parallel 8823 EPSG 5.2 0 Longitude of natural origin 8802 EPSG 5.2 0 False Easting 8806 EPSG 5.2 0 False Northing 8807 EPSG 5.2 0 Example triangle01- simple example of a 'path' A path that draws a triangle Example cubic01- cubic Bézier commands in path data Picture showing a simple example of path data using both a "C" and an "S" command, along with annotations showing the control points and end points M100,200 C100,100 250,100 250,200 S400,300 400,200 Example quad01 - quadratic Bézier commands in path data Picture showing a "Q" a "T" command, along with annotations showing the control points and end points Example arcs01 - arc commands in path data Picture of a pie chart with two pie wedges and a picture of a line with arc blips Example rect01 - rectangle with sharp corners Example rect02 - rounded rectangles Example circle01 - circle filled with red and stroked with blue Example ellipse01 - examples of ellipses Example line01 - lines expressed in user coordinates Example polyline01 - increasingly larger bars Example polygon01 - star and hexagon Example text01 - 'Hello, out there' in blue Hello, out there Example tspan01 - using tspan to change visual attributes You are not a banana. Example tspan02 - using tspan's dx and dy attributes for incremental positioning adjustments But you are a peach! Example tspan03 - using tspan's x and y attributes for multiline text and precise glyph positioning Cute and fuzzy Example tspan04 - The number of rotate values is less than the number of characters in the string. Hello, out there Example tspan05 - propagation of rotation values to nested tspan elements. Not all characters in the text have a specified rotation Referenced character data Example tref01 - inline vs reference text content Inline character data Right-to-left Text A simple example for using the 'direction' property in documents that predominantly use right-to-left languages. داستان SVG 1.1 SE طولا ني است . Right-to-left Text An example for using the 'direction' and 'unicode-bidi' properties in documents that predominantly use right-to-left languages. כתובת MAC:‏ 00-24-AF-2A-55-FC Example textdecoration01 - behavior of 'text-decoration' property Normal text Text with line-through Underlined text One word has different underlining Text along path1 Text along path1 Example toap01 - simple text on a path We go up, then we go down, then up again Example toap02 - tspan within textPath We go up , then we go down, then up again Example toap03 - text on a path with startOffset attribute We go up, then we go down, then up again Placing an arrowhead at the end of a path. File which produces the same effect as the marker example file, but without using markers. Gradients apply to leaf nodes Example lingrad01 - fill a rectangle using a linear gradient paint server Example radgrad01 - fill a rectangle by referencing a radial gradient paint server Example mask01 - blue text masked with gradient against red background Masked text Example opacity01 - opacity property Example filters01.svg - introducing filter effects An example which combines multiple filter primitives to produce a 3D lighting effect on a graphic consisting of the string "SVG" sitting on top of oval filled in red and surrounded by an oval outlined in red. SVG Example enable-background01 This test case shows five pictures which illustrate the rules for background image processing. This filter discards the SourceGraphic, if any, and just produces a result consisting of the BackgroundImage shifted down 125 units and then blurred. This filter takes the BackgroundImage, shifts it down 125 units, blurs it, and then renders the SourceGraphic on top of the shifted/blurred background. The first picture is our reference graphic without filters. The second adds an empty 'g' element which invokes ShiftBGAndBlur. The third invokes ShiftBGAndBlur on the inner group. The fourth invokes ShiftBGAndBlur on the triangle. The fifth invokes ShiftBGAndBlur_WithSourceGraphic on the triangle. Example feBlend - Examples of feBlend modes Five text strings blended into a gradient, with one text string for each of the five feBlend modes. Normal Multiply Screen Darken Lighten Example feColorMatrix - Examples of feColorMatrix operations Five text strings showing the effects of feColorMatrix: an unfiltered text string acting as a reference, use of the feColorMatrix matrix option to convert to grayscale, use of the feColorMatrix saturate option, use of the feColorMatrix hueRotate option, and use of the feColorMatrix luminanceToAlpha option. Unfiltered Matrix Saturate HueRotate Luminance Example feComponentTransfer - Examples of feComponentTransfer operations Four text strings showing the effects of feComponentTransfer: an identity function acting as a reference, use of the feComponentTransfer table option, use of the feComponentTransfer linear option, and use of the feComponentTransfer gamma option. Identity TableLookup LinearFunc GammaFunc Example feImage - Examples of feImage use Three examples of using feImage, the first showing the default rendering, the second showing the image fit to a box and the third showing the image shifted and clipped. Example feMorphology - Examples of erode and dilate Five text strings drawn as outlines. The first is unfiltered. The second and third use 'erode'. The fourth and fifth use 'dilate'. Unfiltered Erode radius 3 Erode radius 6 Dilate radius 3 Dilate radius 6 Example feTurbulence - Examples of feTurbulence operations Six rectangular areas showing the effects of various parameter settings for feTurbulence. type=turbulence baseFrequency=0.05 numOctaves=2 type=turbulence baseFrequency=0.1 numOctaves=2 type=turbulence baseFrequency=0.05 numOctaves=8 type=fractalNoise baseFrequency=0.1 numOctaves=4 type=fractalNoise baseFrequency=0.4 numOctaves=4 type=fractalNoise baseFrequency=0.1 numOctaves=1 Example link01 - a link on an ellipse Example script01 - invoke an ECMAScript function from an onclick event Click on circle to change its size Example anim01 - demonstrate animation elements It's alive! Demonstration of the resolution of namespaces for animation Example animMotion01 - demonstrate motion animation computations SVG Text using embedded font Text using referenced font