![]() ![]() ![]() Please note: this tutorial makes reference to SVG-edit stable In this short introduction we will adopt final user point of view regarding SVG-edit like aīlack box, that means that we will ignore what happen inside. Otherwise, if you prefer, you can integrate SVG-edit capabilities in your HTML page, including a Opera, Crome and of course Internet Explorer 6. SVG-edit could be spawn by all the major browser: FireFox, Safari, If you need it just enter the following URL in your preferred browser: You don't need to bring SVG-edit with you on CD-ROM or pen-drive because SVG-edit is alwaysĪccessible through the net. When you edit web-pages on-line, trying to adapt or recycle available SVG pictures to illustrate a different text. If you literally break down the word “viewport” you’ll get a hint as to its role in SVG it creates a “port” through which you can “view” a section of an SVG.Written in JavaScript, SVG-edit has been designed to be at your side when you need more, that is You can imagine this as being something akin to a porthole window through which you can see the world beyond. The SVG viewport is like a porthole window whose size determines what you can see through itĪs with a window, the size of the viewport determines how much you can see, but it doesn’t define the size of whatever might be visible through that viewport. The viewport size is set by adding width and height attributes to the svg element, like so: What’s on the other side could theoretically be any size at all.įor example, you might have a shape in your graphic that is 100px by 100px, but if you set the SVG viewport to 50px by 50px you’ll only see a portion of that shape. In the first SVG we see the entire 100px by 100px circle, but in the second SVG when we set our viewport size to 50px by 50px we only see a quarter of the circle. The viewBox can be thought of as much like the viewport but with two extra features: it can “pan” and it can “zoom”. We control the viewBox by adding it as an attribute to the svg element, with a value comprising four space separated numbers: viewBox = The SVG viewBox is very similar to the viewport, but it can also pan and zoom like a telescope viewBox Parameters Building on the “looking through glass” analogy, if the viewport is like a window, the viewBox is like a telescope. ![]() The first two numbers define the position of the viewBox, which we’ll think of as “panning”. The last two numbers define the dimensions of the viewBox, which we’ll think of as “zooming”. Note: as well as the svg element, the viewBox attribute can also be used on the elements symbol, marker, pattern and view. We’ll start by looking at “zooming”, which we can do with the last two viewBox parameters: width and height respectively. We’ll leave the first two parameters at 0 0 for now. If those last two parameters have the same dimensions as the viewport, there’s no zooming in or out so nothing changes. Take a look SVG number 3 for example:īut if we make those two numbers larger than the viewport dimensions we’ll effectively zoom out, and if we make them smaller we’ll zoom in. In SVG number 4 in the example above we’ve set the viewBox width and height to 100, which is double the size of our viewport. This “zooms out” and shows double the content, thereby again revealing the entire circle. In the fifth SVG our viewBox is set to a width and height of 25, which is half the size of our viewport. This SVG viewBox zoom “zooms in”, showing half the amount of content. The first two viewBox parameters allow you to “pan” by setting where the upper left corner of the viewBox should be. To pan down, increase the second number.To pan left, decrease the first number.To pan right, increase the first number.The first number controls the horizontal position, and the second controls the vertical position. Take a look at how this panning works in this example. ![]()
0 Comments
Leave a Reply. |