February 2002
Intermediate to advanced
356 pages
7h 56m
English
Content preview from SVG EssentialsBecome 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,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Chapter 2. Coordinates
The world of SVG is an infinite canvas. In this chapter, we’ll discuss how you tell a viewer program which part of this canvas you’re interested in, what its dimensions are, and how you locate points within that area.
The Viewport
The area of the canvas that your document intends to use
is called the viewport. You establish the size of this viewport with the
width and height attributes on the <svg> element. The values of these
attributes can be simply a number, which is presumed to be in pixels;
this is said to be specified in user coordinates. You may also specify
width and height as a number followed by a unit
identifier, which can be one of the following:
emThe font size of the default font, usually equivalent to the height of a character
exThe height of the letter x
pxPixels
ptPoints (1/72 of an inch)
pcPicas (1/6 of an inch)
cmCentimeters
mmMillimeters
inInches
Examples:
<svg width="200" height="150"><svg width="200px" height="200px">Both of these specify an area 200 pixels wide and 150 pixels tall.
<svg width="2cm" height="3cm">Specifies an area two centimeters wide and three centimeters high.
<svg width="2cm" height="36pt">It is possible, though unusual, to mix units; this element specifies an area two centimeters wide and thirty-six points high.
If you have one <svg>
element nested within another <svg> element, the nested tag may also
specify its width and height as a percentage, measured in terms of
the enclosing element. We will see nested <svg> elements in ...
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.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.