Add SVG elements and scripting
Takeaway: Learn how to add SVG elements to your Web page, including sound, vector graphics, and script.
By Jackson West
We'll start our discussion of SVG elements with a bitmap. SVG can
use GIF, JPEG, and PNG images (but not GIF animation). To replace the square path with a bitmap image of your choice, simply delete the
Warning: The linked style sheets and linked images do not work together on a Macintosh running Netscape 4.6 (which crashed due to Error Type 2). You will have to use
Sound elements
Now to add a sonic element, we simply append the tag (before
The sound will play roughly in sync with the rotation. You may also use WAV audio. This feature is particular to the Adobe SVG viewer and requires the
A word of caution: Alas, we never successfully got this feature to work in conjunction with raster images or external style sheets, leading us to believe that the Adobe SVG Player has some larger issues to iron out when used on the Macintosh platform running Netscape or Explorer. Again, we recommend using Beatnik (which we will discuss in a moment) or another audio alternative. Sounds cannot be embedded in an SVG document.
Vector graphics
Now we can get into the meat of the subject: vector graphics. Editing vector graphics in your text editor would be a long and painful process, especially for anything much more complicated than a square. Save yourself the trouble and start researching your vector-conversion options. There are a number of converters for CAD-CAM, EPS, and other standard vector formats available for download and purchase. If you own Adobe Illustrator 9.0, you can use the File › Export menu command and choose SVG (SVG) from the list of file types. When exporting, Illustrator will create a text file of your graphic in the SVG format; you can then just cut and paste it into your SVG document.
To get an idea of how conversion apps save you from a world of heartache, you can view an SVG file exported from Adobe Illustrator. Click here.
To see this graphic, first copy the style
Scripts
JavaScript is central to the full SVG experience--it allows SVG to interact with HTML, other plug-ins (such as Flash, Beatnik, Real, or QuickTime), server-side scripts, and, of course, the user. Let's set up our HTML page with some standard scripts responsible for detecting the Adobe SVG Viewer and instantiating the auto-installer if it is not present.
You can see the embed_svg.html file reformatted for JavaScript functionality. Click here.
First, we call three external scripts: Safecall.js, svgcheck.js, and svgcheck.vbs. These files are the standard script objects for using JavaScript with SVG (and you can grab all three from the source code). Next, we define the function
The next script calls a function within svgcheck.js to test for the SVG viewer. To utilize this, you will have to also embed your SVG file using
Now we can start adding JavaScript commands to example.svg that will animate the elements in the SVG demo. We've broken up our additions to example.svg with comments for your convenience. Click here.
The first function,
Jackson West is a frequent contributor to CNET Builder.com.
square_styled group and replace it with the following:
<image xlink:href="central_park.gif" width="225" height="225" />
<style></style> tags to declare your styles directly in the SVG document if you wish to link to images. Adobe Illustrator owners can also embed raster images via Place, then include the images when exporting to SVG. (Illustrator saves the images as Base64 encoded binary data, and they can be copied and pasted from document to document using a text editor.)
</svg>):
<a:audio xlink:href="sound_name.mp3" begin="0s" dur="8s" repeatCount="indefinite"></a:audio>
xlmns attributes to the <svg> tag as described earlier.
st0 between the <style></style> tags or into your style sheet svg_styles.css. Next, copy the group elephant into the body of the SVG document (for instance, before the title_text group in example.svg). Open the SVG file with your browser to see the elephant. You should be drunk with SVG power by now, but you'll have to sober up for the next topic.
on_load_html(), which assigns the SVG object to a window property (for global script access) and begins the animation every 2 seconds (JavaScript measures time in milliseconds, hence 2000ms is 2 seconds) using setInterval. In the <body> tag, we then call on_load_html() to run when the HTML page has loaded.
emitSVG() (<embed> is called for users without JavaScript support through the <noscript> tag). Using this standard deployment method helps ensure that users get a functional experience.
on_load(), is necessary to provide the HTML page with the information it needs to call the function next_frame(), which does all of the animation processing. Using SVG object properties and methods, you can read and set any number of object attributes. In next_frame(), we toggle visibility to make the objects elephant, square_styled, and title_text disappear--then magically reappear--every few seconds.
SponsoredWhite Papers, Webcasts, and Downloads
- 7 More Red Hat Linux Tips and Tricks Global Knowledge
- A Global Knowledge Template: Project Management Workbook Global Knowledge
- Troubleshooting SQL 2005: Opening the Database Administrator's Toolbox Global Knowledge
Article Categories
- Security
- Security Solutions, IT Locksmith
- Networking and Communications
- E-mail Administration NetNote, Cisco Routers and Switches
- CIO and IT Management
- Project Management, CIO Issues, Strategies that Scale
- Desktops, Laptops & OS
- Windows 2000 Professional, Microsoft Word, Microsoft Excel, Microsoft Access, Windows XP,
- Data Management
- Oracle, SQL Server
- Servers
- Windows NT, Linux NetNote, Windows Server 2003
- Career Development
- Geek Trivia
- Software/Web Development
- Web Development Zone, Visual Basic, .NET
Harnessing the power of waves
Planting solar gardens
Fill your car for $1.10 a gallon?
