pygal, renders an svg and returns in the graphs dictionary. I try to embed it into a web2py page. That works. But I can't figure out how to reduce the size of the graphs on the page.
the view:
{{extend 'layout.html'}}
<h1>Hello {{=request.vars.simulation_id}}</h1>
<figure>
{{=XML(one)}}
{{=XML(two)}}
</figure>
and the default.py function:
def run_simulation():
simulation = start.Simulation()
graphs = simulation.run()
return graphs
It looks like pygal supports setting the size directly in the code: http://pygal.org/web/#iddirectly-in-the-html
Alternatively you can override the width and height settings on the SVG element by using CSS:
.svg-container svg {
height: 240px;
width: 240px;
}
NOTE: I'm using a class selector on the assumption that you might want different sizes for different SVG images. If you want the same size for all images then you should be good with just svg in the CSS selector. Also worth mentioning that you have to override both height and width, if you just do one your SVG image won't resize.
Here is a complete example, using CSS embedded in the HTML file. It shows that you can use absolute scaling (fixed px values) as well as relative scaling.
<html>
<head>
<!-- CSS embedded in HTML here.
For reusability you could put the CSS in a separate file
and link to it here instead
-->
<style>
/* Add svg-small class to an element to scale the child SVG element(s) to fixed width and height */
.svg-small svg {
height: 24px;
width: 24px;
}
/* Add svg-halfwidth class to an element to scale the child SVG element(s) to half the page width
The height will scale automatically to preserve the aspect ratio. */
.svg-halfwidth svg {
width: 50%;
height: auto;
}
</style>
</head>
<body>
<figure class="svg-small">
<caption>A small droid</caption>
<svg fill="#000000" height="240" viewBox="0 0 24 24" width="240" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/>
</svg>
</figure>
<figure class="svg-halfwidth">
<caption>A scaled droid</caption>
<svg fill="#000000" height="240" viewBox="0 0 24 24" width="240" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/>
</svg>
</figure>
</body>
</html>
Depending on how you are generating these files, it may be easier to do embedded CSS as shown above, but in general I would separate my CSS into a separate file:
<html>
<head>
<link rel="stylesheet" href="styles.css"/>
<head>
<body> ... as before ... </body>
</html>
Then styles.css is just the same content as the <style> tag in the previous example:
.svg-small svg {
height: 24px;
width: 24px;
}
.svg-halfwidth svg {
width: 50%;
height: auto;
}