J. David Eisenberg - SVG Essentials

This chapter gives a brief history of SVG, compares raster and vector graphics systems, and ends with a brief tutorial introducing the main concepts of SVG.This chapter shows you the various methods that you can use to put SVG into your HTML5 documents.How do you determine the position of a point in a drawing? Which way is up? This chapter answers those questions, showing how to change the system by which coordinates are measured in a graphic.This chapter shows you how to construct drawings using the basic shapes available in SVG: lines, rectangles, polygons, circles, and ellipses. It also discusses how to determine the colors for the outline and interior of a shape.In a complex drawing, there are elements that are reused or repeated. This chapter tells you how to group objects together so they may be treated as a single entity and reused. It also discusses use of external images, both vector and raster.If you draw a square on a sheet of stretchable material, and stretch the material horizontally, you get a rectangle. Skew the sides of the sheet, and you see a parallelogram. Now tilt the sheet 45 degrees, and you have a diamond. In this chapter, you will learn how to move, rotate, scale, and skew the coordinate system to affect the shapes drawn on it.All the basic shapes are actually specific instances of the general concept of a path. This chapter shows you how to describe a general outline for a shape by using lines, arcs, and complex curves.This chapter adds more to the discussion of color from , discussing how to create a color gradient or a fill pattern.Graphics arent just lines and shapes; text is an integral part of a poster or a schematic diagram. This chapter shows how to add text to a drawing, both in a straight line and following a path.This chapter shows you how to use a clipping path to display a graphic as though it were viewed through a circular lens, keyhole, or any other arbitrary shape. It also shows how to use a mask to alter an objects transparency so that it appears to fade out at the edges.Although an SVG file describes vector graphics, the document is eventually rendered on a raster device. In this chapter, youll learn how to apply raster-oriented filters to a graphic to blur an image, transform its colors, or produce lighting effects.This chapter shows you how to use SVGs built-in animation capabilities.In addition to SVGs built-in animation, you can use both CSS and JavaScript to dynamically control a graphics attributes.This chapter goes further in depth with using JavaScript to manipulate the Document Object Model. It also gives a brief introduction to a JavaScript library designed for working with SVG.Although you can create an SVG file from scratch, many people will have existing vector data or XML data that they wish to display in graphic form. This chapter discusses the use of programming languages and XSLT to create SVG from these data sources.SVG is an application of XML, the Extensible Markup Language. If you havent used XML before, you should read this appendix to familiarize yourself with this remarkably powerful and flexible format for structuring data and documents.You can use stylesheets to apply visual properties to particular elements in your SVG document. These are exactly the same kind of stylesheets that can be used with HTML documents. If youve never used stylesheets before, youll want to read this brief introduction to the anatomy of a stylesheet.If youre a graphic designer who hasnt done much programming, youll want to find out what programmers are talking about when they throw around words like