Example quad01 - quadratic Bézier commands in path data

### Example toap01 - simple text on a path Source: https://www.w3.org/TR/SVG2/text.html A complete SVG example showing a path drawn in red and blue text placed along it using a textPath with href. Includes a viewport outline. ```XML ``` -------------------------------- ### Example InitialCoords - SVG initial coordinate system Source: https://www.w3.org/TR/SVG2/coords.html SVG example showing the initial coordinate system with origin at top/left, x-axis right, y-axis down. It draws axes, red corner markers, and labels for (0,0), (300,0), and (0,100). The viewport is 300px by 100px. ```xml ``` -------------------------------- ### Example circle01: Circle filled with red and stroked with blue Source: https://www.w3.org/TR/SVG2/shapes.html SVG example demonstrating a 'circle' element with center (600,200) and radius 100, filled red and stroked blue. Includes a 'rect' element to outline the viewport. ```XML ``` -------------------------------- ### Example line01 - SVG lines with varying stroke widths Source: https://www.w3.org/TR/SVG2/shapes.html SVG example showing five lines in user coordinates with stroke widths from 5 to 25. The viewBox is '0 0 1200 400' and the lines are drawn in green on a blue viewport outline. ```XML ``` -------------------------------- ### Example polyline01 - increasingly larger bars Source: https://www.w3.org/TR/SVG2/shapes.html SVG example showing a polyline with increasing bar heights. The polyline uses the 'points' attribute with coordinates in the user coordinate system established by the 'viewBox' attribute. The example includes a 'rect' element to outline the viewport. ```xml ``` -------------------------------- ### Example quad01 - quadratic Bézier commands in path data Source: https://www.w3.org/TR/SVG2/paths.html SVG example showing a path with a Q command and a T command, along with annotations for control points and end points. The control point for the T command is automatically computed as the reflection of the previous Q command's control point. ```XML ``` -------------------------------- ### Example cubic01: SVG with C and S commands Source: https://www.w3.org/TR/SVG2/paths.html SVG example showing a path using a 'C' command followed by an 'S' command, with annotations for control points and end points. Uses an internal CSS style sheet. The control point for the 'S' command is automatically computed as the reflection of the previous 'C' command's control point. ```xml ``` -------------------------------- ### SVG text elements with style attribute Source: https://www.w3.org/TR/SVG2/styling.html Example of using the 'style' attribute to style 'text' elements similarly to the previous example, with inline CSS declarations for fill colors. ```XML Variable declared twice Undeclared variable Bad syntax for variable name ``` -------------------------------- ### Example tspan05: propagation of rotate values to nested tspan elements Source: https://www.w3.org/TR/SVG2/text.html SVG example demonstrating how rotate values propagate from a parent text element to nested tspan elements. The text element has rotate="5,15,25,35,45,55", and child tspans override or inherit values. The example includes detailed notes on how values are applied to characters and spaces. ```XML ``` -------------------------------- ### Example arcs01 - arc commands in path data Source: https://www.w3.org/TR/SVG2/paths.html Complete SVG document demonstrating simple uses of arc commands within a path, including a pie chart with two wedges and a line with arc blips. The example uses absolute and relative arc commands with various radii, rotations, and flags. ```XML ``` -------------------------------- ### SVG event attribute example with onclick Source: https://www.w3.org/TR/SVG2/interact.html Example of an SVG event attribute (onclick) that passes the Event object evt to a function MyClickHandler. The event attribute content is interpreted as ECMAScript. ```SVG ``` -------------------------------- ### SVG marker example with arrowhead Source: https://www.w3.org/TR/SVG2/painting.html Illustrative example of a marker element used as an arrowhead at the end of a path. The marker uses markerUnits='strokeWidth', viewBox, and orient='auto'. The rendering effect is visually identical to the following (not shown). ```XML ``` -------------------------------- ### Compact path data without spaces Source: https://www.w3.org/TR/SVG2/paths.html The same path data as the previous example but expressed more compactly by removing spaces. ```SVG M100 100L200 200 ``` -------------------------------- ### Example rect01: Rectangle with Sharp Corners Source: https://www.w3.org/TR/SVG2/shapes.html SVG example showing a rectangle with sharp corners (rx and ry default to 0). The rect is filled with yellow and stroked with navy. Includes a viewport outline in blue. ```XML ``` -------------------------------- ### ECMAScript addEventListener example Source: https://www.w3.org/TR/SVG2/interact.html Shows how to define a function and register it as an event listener using addEventListener in ECMAScript. The function receives an Event object as a parameter. ```ECMAScript function myAction1(evt) { // process the event } // ... later ... myElement.addEventListener("click", myAction1, false) ``` -------------------------------- ### switch element with systemLanguage and catch-all Source: https://www.w3.org/TR/SVG2/struct.html Example of using the switch element to render the first matching child based on the user's language preference. A final child without systemLanguage acts as a catch-all, ensuring content is always displayed. ```SVG Bonjour こんにちは Hello ``` -------------------------------- ### Example ViewBox: SVG with viewBox and preserveAspectRatio Source: https://www.w3.org/TR/SVG2/coords.html This example shows an outermost svg element with width and height of 300px and 200px, and a viewBox of '0 0 1500 1000' with preserveAspectRatio='none'. The viewBox causes the graphic to scale to fit the SVG viewport. ```SVG ```