HTML and CSS Reference
In-Depth Information
In this section, you'll learn the following reusable SVG techniques:
• How to integrate SVG's XML language into an HTML document
• How to create text and simple shapes
• How to make simple illustrations with paths
• How to use XLink to inject .svg files into a page
• How to animate elements with properties
• How to tweak SVG shapes with CSS
• How to work with the
viewBox
property for liquid layouts
Note that SVG requires the use of a modern browser. Chrome seems to have the smoothest
SVG performance, but you can use any browser except for Opera, which lacks the bound-
ing box support you need to complete this chapter's application. Please note that SVG is a
massive specification and no browser supports it 100%.
Inline SVG in
HTML5
7
4
9
11.6
5.1
In this section, you'll start building SVG Aliens by setting up an SVG XML tag in an
HTML document, along with CSS and a JavaScript file. You'll also make a flexible view-
ing window similar to Wilson's by configuring the
viewBox
property on an
<svg>
tag.
Let's get started with the basic game setup.
7.2.1. Setting up SVG inside HTML
As you move through the rest of this section, you'll follow seven steps that will yield the
basic framework for a resizable, browser-based game:
• Step 1: Set up SVG tag basics.
• Step 2: Create your CSS file.
• Step 3: Add shapes for the Game Start screen.
• Step 4: Add text to the screen and animate it.
