Skip to Main Content
SVG for Web Developers
book

SVG for Web Developers

by Ellen Pearlman, Lorien House
December 2002
Beginner to intermediate content levelBeginner to intermediate
464 pages
8h 34m
English
Pearson
Content preview from SVG for Web Developers

About Paths

The <path> element works like the pen tool in Adobe Photoshop. You define a starting point where the pen touches down, then define subsequent points from that spot. The pen draws lines between each defined point. Paths can be closed or open, filled, stroked, transformed, and manipulated like any other shape element. Let's take a look at code defining a <path> element.

<path d="M50 50 L65 90 L100 80 L100 200 L250 210" 
style="fill:none; stroke:black"/>

The code looks like some bizarre form of shorthand, and, in fact, it is! The <path> element requires the d attribute to create shapes. The d attribute stands for path data and consists of coordinates that define the path to create the outline of a shape.

The letters M and L within the ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Building Web Applications with SVG

Building Web Applications with SVG

Jon Frost David Dailey and Domenico Strazzullo
SVG Text Layout

SVG Text Layout

Amelia Bellamy-Royds, Kurt Cagle
Using SVG with CSS3 and HTML5

Using SVG with CSS3 and HTML5

Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey

Publisher Resources

ISBN: 0131004999Purchase book