As you're working on XSLT to SVG for your projects, some of you may have lots of data to plot that goes "off screen": You're outputting code for it, but your graph looks like it's cut off on top or bottom, or on the right. To help you control the view and scale of your plot, I want to show you what happens with the @width and @height attributes to set what we call a "viewport" for SVG in your web browser when you go to look at it. And we can also shrink a big plot to fit in a small window using a @viewBox together with a viewport. Since it's familiar to us, I'll use the example from our plot of the number of times Alice talks in Alice in Wonderland that we worked on in class together.
1) First, here is a standard way to set a "viewport" just using @width and @height using "100%" values for each:
The @width and @height attributes used together create a viewport on your browser window, indicating how much of the window should display the plot. This code says, 100% of the plot should fit on the screen without scrolling. Inside, the <g> element has a @transform attribute that does what we call transform-translate. Here it translates or shifts the X values over by 70 and the Y values down by 600. (In class we didn't shift this far enough down: we were using 525 for the y value, and I noticed that our title, plotted up at -550, got cut off. We fix that by using a larger Y value here in transform-translate.) Notice that your transform-translate and your viewport work together to define the dimensions of your SVG plot.
2) You can also define your viewport using raw numbers for @width and @height that match your SVG plot. If you do this, you just need to estimate something higher in each direction than your highest X or Y values in order for this to fit. Note that you don't use negative numbers on @height: it's an absolute value. For our Alice plot, we used:
Here it's easy to see how we're setting the height to be a little larger than the value we used in transform-translate. It comes out looking pretty much exactly the same as defining the viewport with percentage values. And here's the complete code for the SVG.
3) So, what if you don't like plotting such a big graph to fill the whole screen? What if you want to shrink the plot? We'll have some options for this when we go to fit SVG in an HTML page. One way is to make the SVG max out to 100% of its viewing area, and then embed your whole SVG file (complete with its xmlns="http://www.w3.org/2000/svg") inside an HTML <div> element.
In CSS you can control (with a nice set of flexboxes for example) how much space you want that div to take up on your page. We'll experiment with this in class with some actual code next week.
Another way is to shrink the dimensions of your SVG plot in the SVG itself. You can do that by setting a smaller viewport that represents how much space you really want to use on the screen, and by then setting a viewBox that defines how to stretch your plot in that small space.
Here we set a width and height whose values are definitely too small to match our plot. This creates a small, square "viewbox" in your browser window that's only 500 pixels by 500 pixels. But we set a @viewBox that scales the X and Y coordinates inside that window to display from 0 to 1000.
The @viewBox takes 4 values: the first pair is the X,Y coordinates of the top left corner: 0 0.
The second pair is the X,Y coordinates of the bottom right corner: 1000 1000.
Further reading and examples: Here's a handy tutorial on how to adjust your SVG viewport and more sophisticated stuff you can try with zooming and scaling with SVG's @viewBox attribute: "SVG Viewport and ViewBox for Beginners" .
As you're working on XSLT to SVG for your projects, some of you may have lots of data to plot that goes "off screen": You're outputting code for it, but your graph looks like it's cut off on top or bottom, or on the right. To help you control the view and scale of your plot, I want to show you what happens with the
@widthand@heightattributes to set what we call a "viewport" for SVG in your web browser when you go to look at it. And we can also shrink a big plot to fit in a small window using a@viewBoxtogether with a viewport. Since it's familiar to us, I'll use the example from our plot of the number of times Alice talks in Alice in Wonderland that we worked on in class together.1) First, here is a standard way to set a "viewport" just using
@widthand@heightusing "100%" values for each:The
@widthand@heightattributes used together create a viewport on your browser window, indicating how much of the window should display the plot. This code says, 100% of the plot should fit on the screen without scrolling. Inside, the<g>element has a@transformattribute that does what we call transform-translate. Here it translates or shifts the X values over by 70 and the Y values down by 600. (In class we didn't shift this far enough down: we were using 525 for the y value, and I noticed that our title, plotted up at -550, got cut off. We fix that by using a larger Y value here in transform-translate.) Notice that your transform-translate and your viewport work together to define the dimensions of your SVG plot.2) You can also define your viewport using raw numbers for
@widthand@heightthat match your SVG plot. If you do this, you just need to estimate something higher in each direction than your highest X or Y values in order for this to fit. Note that you don't use negative numbers on@height: it's an absolute value. For our Alice plot, we used:Here it's easy to see how we're setting the height to be a little larger than the value we used in transform-translate. It comes out looking pretty much exactly the same as defining the viewport with percentage values. And here's the complete code for the SVG.
3) So, what if you don't like plotting such a big graph to fill the whole screen? What if you want to shrink the plot? We'll have some options for this when we go to fit SVG in an HTML page. One way is to make the SVG max out to 100% of its viewing area, and then embed your whole SVG file (complete with its
xmlns="http://www.w3.org/2000/svg") inside an HTML<div>element.In CSS you can control (with a nice set of flexboxes for example) how much space you want that
divto take up on your page. We'll experiment with this in class with some actual code next week.Another way is to shrink the dimensions of your SVG plot in the SVG itself. You can do that by setting a smaller viewport that represents how much space you really want to use on the screen, and by then setting a viewBox that defines how to stretch your plot in that small space.
Here we set a width and height whose values are definitely too small to match our plot. This creates a small, square "viewbox" in your browser window that's only 500 pixels by 500 pixels. But we set a
@viewBoxthat scales the X and Y coordinates inside that window to display from 0 to 1000.The
@viewBoxtakes 4 values: the first pair is the X,Y coordinates of the top left corner: 0 0. The second pair is the X,Y coordinates of the bottom right corner: 1000 1000.Basically, this radically shrinks that range of coordinates into a small space! Here's the full code for the SVG file.
Further reading and examples: Here's a handy tutorial on how to adjust your SVG viewport and more sophisticated stuff you can try with zooming and scaling with SVG's
@viewBoxattribute: "SVG Viewport and ViewBox for Beginners" .@KSD32 @alnopa9 @lewisabia @amberpeddicord @Bennediction @smdunn921 @lmcneil7 @haggis78 @ajw120 @jwa32 @bobbyfunks @ChinoyIndustries @dylanmore @mattnowakowski @ads171