svgbasics.com
SVG Basics Tutorials - Simple Text
http://www.svgbasics.com/simple_text.html
Plain Text with SVG. Text in SVG gets the best treatment possible. It is rendered as a graphic so all your graphic transforms apply to it and it still acts like text - that is, it can be selected and copied as text by a user. Simple Applications of Text. The text element is used to write text at a location. The location is given in absolute terms with the x and y attributes or a relative location with dx and dy attributes. Xml version="1.0" standalone="no"? 0 0 200 200. It was the best of times. DOCTYPE ...
svgbasics.com
SVG Basics Tutorials - textPath, Text Fill and Stroking
http://www.svgbasics.com/text2.html
Text - Plain or Not-So-Plain. Fancy Uses for Text. Okay, so SVG isn't a great format for your word-processor to save files in (with the whole "no word wrap" thing). It is great for rendering shiny little baubles that have text in them or revolve around some highly stylized text. Making text follow a curve or shape. The textPath element can be used in conjunction with the path element to make things interesting very quickly. Xml version="1.0" standalone="no"? 0 0 500 300. 0 0 500 300. 0 0 500 300. Use x="...
svgbasics.com
SVG Basics Tutorials - Italic, Subscript and Superscript
http://www.svgbasics.com/font_effects_italic.html
Decorating Text with SVG - Italic, Subscript and Superscript. To get italic text in a tspan or text element, set the font-style to "italic" ( and back to "normal" when you're done). The "oblique" value is also available, but as far as I know, this is a synonym for italic. Xml version="1.0" standalone="no"? DOCTYPE svg PUBLIC "-/ W3C/ DTD SVG 1.1/ EN" "http:/ www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". 0 0 500 300. Normal (not italic and not oblique) font-style. Xml version="1.0" standalone="no"? T=lateni...
svgbasics.com
SVG Basics Tutorials - Linear Gradient Fills
http://www.svgbasics.com/linear_gradients.html
Using A Linear Gradient Fill in SVG. The last circle on the previous page is actually filled by a gradient. Gradients and Patterns are called "Paint Servers" in SVG. Colours are also called "Paint Servers." This probably doesn't matter to you. Xml version="1.0" standalone="no"? DOCTYPE svg PUBLIC "-/ W3C/ DTD SVG 1.1/ EN" "http:/ www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". 0 0 1100 400. 60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60. 60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60. 0 0 1100 400.
svgbasics.com
SVG Basics Tutorials - Creating Paths
http://www.svgbasics.com/paths.html
Creating Paths with SVG. A path is an element that describes a set of lines, curves and arcs. A path can be stroked or used as input for other elements. Xml version="1.0" standalone="no"? DOCTYPE svg PUBLIC "-/ W3C/ DTD SVG 1.1/ EN" "http:/ www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". 0 0 1100 400. M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60. Where to begin - moveto and lineto. Xml version="1.0" standalone="no"? DOCTYPE svg PUBLIC "-/ W3C/ DTD SVG 1.1/ EN" "http:/ www.w3...A tri...
svgbasics.com
SVG Basics Tutorials - Transforms to Rotate Shapes
http://www.svgbasics.com/rotate.html
Rotating Shapes with a Transform in SVG. Xml version="1.0" standalone="no"? DOCTYPE svg PUBLIC "-/ W3C/ DTD SVG 1.1/ EN" "http:/ www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". 0 0 200 200. Filters - Image Sources. Filters - Colour Matrices. Google ad client = "pub-1870854262600725"; google alternate ad url = "http:/ rcm.amazon.com/e/cm? T=latenightpcse-20&o=1&p=14&l=st1&mode=books&search=svg&fc1=000000&=1&lc1=0033FF<1= blank&f=ifr&bg1=FFFFFF&f=ifr"; google ad width = 120; google ad height = 600; google ad...
svgbasics.com
SVG Basics Tutorials - Scalable Vector Graphics by Hand
http://www.svgbasics.com/index.html
Welcome to the SVGBasics tutorials. Scalable Vector Graphics (SVG) is a standard from the W3C which is built on top of XML. The SVG standard describes ways that graphics can be drawn for use on the web. I've assembled here some examples that you can freely modify and reuse. The idea is to cover the basics with numerous examples that people can experiment with to get an idea of what SVG can do. What good is this site? SVG is supported natively by Firefox. Or possibly Apache Batik. Help with SVG Viewers.
svgbasics.com
SVG Basics Tutorials - Fonts with the font-size and font-family Attributes
http://www.svgbasics.com/using_fonts.html
Specifying a Font for Text with SVG. Specifying fonts and font sizes. When you specify a list of choices for a font, always list the most generic one last (this will be one of 'serif', 'sans-serif', 'cursive', 'fantasy', or 'monospace'). There's no need to give more than one generic, since everybody has to have one of each (if they don't have at least that, then there's no point in specifying the font anyway). Xml version="1.0" standalone="no"? 0 0 500 300. Black canyons where the rapids rip and roar?
svgbasics.com
SVG Basics Tutorials - Elliptical Arcs with SVG
http://www.svgbasics.com/arcs.html
Elliptical Arcs with SVG. The leftmost arc has 0 degrees x-axis rotation, the top-middle arc has 30 degrees, the bottom-middle has 45 degrees and the rightmost has 135 degrees. Notice in the source that only the first move command and the angle change since I've used relative coordinates. Xml version="1.0" standalone="no"? DOCTYPE svg PUBLIC "-/ W3C/ DTD SVG 1.1/ EN" "http:/ www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". 0 0 1100 400. M 50 200 a 100 50 0 1 1 250 50. M 400 100 a 100 50 30 1 1 250 50. T=laten...
