 | Level: Intermediate Uche Ogbuji (uche@ogbuji.net), Principal Consultant, Fourthought Inc.
20 Jun 2006 Learn step-by-step how to incorporate Scalable Vector Graphics (SVG) into Web pages using real browser examples. SVG 1.1, an XML language for describing two-dimensional vector graphics, provides a practical and flexible graphics format in XML, despite the language's verbosity. Several browsers recently completed or announced built-in SVG support. In this tutorial
This tutorial focuses on SVG for Web development, offering step-by-step instruction for Web developers and designers to learn how to use SVG in practical Web sites. The lessons are built around examples that you can view and experiment with in your favorite browser. This tutorial doesn't go into a lot of detail about the SVG language. Instead, it provides a broad enough view of the language to guide you in deploying it on the Web. SVG is a technology positioned for many uses in the Web space. You can use it for presenting simple graphics (as with JPEG) or complex applications (as with Macromedia Flash). As such, it's an important weapon in every Web developer's and designer's arsenal. Programmers should take this tutorial if they deal with any Web applications. Web designers should take this tutorial to learn how to deploy efficient vector graphics on the Web. In this tutorial, you will learn: - The basics of SVG
- To publish vector graphics on the Web using SVG
- To render such images in a browser either stand-alone or embedded in XHTML
Prerequisites
This tutorial assumes knowledge of XML, XML namespaces, Cascading Stylesheets (CSS), and basic XHTML. Even though this tutorial focuses on SVG on the Web, it requires no prior knowledge of SVG and starts with the basics of the language. To get basic informaiton on XML, XML namespaces, CSS or XHTML, see the following developerWorks tutorials and articles:
You should also understand the basic mathematics of the two-dimensional rectilinear coordinate system, also known as the Cartesian coordinate system. You might remember this best from high school mathematics as how to specify points along X and Y axes.
System requirements
You will need JavaScript enabled in your browser. The author recommends that you try out the examples in this tutorial. They only require a Web browser that supports SVG. Firefox 1.5 or later has such support built in, as does Opera 9. Safari has announced support for SVG in coming versions, but for now, the support is only available in nightly development snapshots where you have no guaranteed stability.
- Mac OS X users might want to try the Camino Web browser for SVG support.
- Microsoft® Internet Explorer users will require a plug-in such as the Adobe SVG Viewer.
-
Firefox (the author used Firefox 1.5.0.2) is a popular Web browser available on Microsoft Windows®, Mac OS X, Linux, and other platforms. It is based on Mozilla's rendering engine.
Duration
1 hour
Formats html, pdf
| | | |
