Styling with an SVG tag

johnsmith153 · 11-13-2012, 03:26 PM

I am trying to use the <svg> tag in this way:

http://page-test.co.uk/svg.html

Basically, I want the green shape to display/fit perfectly inside the red box when I change the browser size. At the moment it doesn't at all.

I would like the option of both having the shape always fill a certain % of the red box, and also for the green shape to be a fixed size (although never be larger than the red box).

Three things can't be changed in my code:
(1) The red box, although anything can be added inside (e.g. another div wrapping the <svg> tag).
(2) Must use the <svg> tag rather than a .svg file in either <img>, <embed> or <object>
(3) For example purposes, keep the green shape, rather than another example.

I can't see how all this is possible, which it would be using a bitmap inside <img>.

Thanks for any help.

Arbitrator · 11-14-2012, 07:55 AM

Quote:

Originally Posted by johnsmith153

Basically, I want the green shape to display/fit perfectly inside the red box when I change the browser size.

Several questions need to be answered first:

What's the preferred initial size of the red box? So far, you've specified width: 30%;, but it's unclear how tall the red box should initially be.
What's the preferred initial size of the SVG image? Is it the view box size (400×200 pixels)? Is it the width or height of the red box?
Is it intentional that your view box is smaller than the SVG image itself (guaranteeing that the bottom of the image will be truncated)?

johnsmith153 · 11-14-2012, 08:28 AM

Hi,

Thanks for replying.

It seems my setup is a little confusing and this is the first time I have looked at <svg>. Basically the red box must be 30% width and the height should not be set so it just wraps around the contents.

The settings on the SVG are not set in stone. For the example, I really just want this part:

Code:

<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1"></polygon>

...to be displayed central in the red box.

The idea is to understand how all this works so I can display any <svg> code, but doing so inside the 30% red box div doesn't seem easy.

So, really I want this:
http://page-test.co.uk/image.html
...but instead of using the <img> tag to display the bitmap I want to display the green shape with <svg>.

If my view box is smaller than the SVG image itself then this is just from my poor attempt to get this working.

Hope this helps. Thanks for helping.

Arbitrator · 11-16-2012, 01:04 AM

Quote:

Originally Posted by johnsmith153

So, really I want this:
http://page-test.co.uk/image.html
...but instead of using the <img> tag to display the bitmap I want to display the green shape with <svg>.

I don't think this is generally possible.

I was able to get it to work in Internet Explorer 10, but only for SVG images displayed via the object element (via data URI and an external file). That's a bad thing though because Internet Explorer's behavior with the object element ends up being inconsistent with the other delivery methods (inline SVG and the img element); all of the other browsers display the SVG image consistently regardless of the delivery method.

Note that in order to test, I had to set the width and height attributes (whose values I based on the view box) since browsers do not handle the viewBox attribute consistently. In particular, Google Chrome 23 renders the image much taller than the other browsers tested.

The code I used:

page.xhtml

Code:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
	<head>
		<title>Demo</title>
		<style>
			/* Layout */
			* { margin: 0; }
			svg, object, img { display: block; }
			object { height: 100%; }
			.box { width: 30%; margin: 2em; border-width: 1px; border-style: solid; }
			
			/* Color Scheme */
			.box { border-color: red; }
		</style>
	</head>
	<body>
		<div class="box">
			<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="200px" viewBox="0 0, 400 200">
				<style>
					polygon { fill: lime; stroke-width: 1; stroke: purple; }
				</style>
				<polygon points="220 10, 300 210, 170 250, 123 234"/>
			</svg>
		</div>
		<div class="box">
			<object type="image/svg+xml" data="data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22400px%22%20height%3D%22200px%22%20viewBox%3D%220%200%2C%20400%20200%22%3E%0A%09%3Cstyle%3E%0A%09%09polygon%20%7B%20fill%3A%20lime%3B%20stroke-width%3A%201%3B%20stroke%3A%20purple%3B%20%7D%0A%09%3C%2Fstyle%3E%0A%09%3Cpolygon%20points%3D%22220%2010%2C%20300%20210%2C%20170%20250%2C%20123%20234%22%2F%3E%0A%3C%2Fsvg%3E">
				<p>This image depicts a green, pyramidal triangle.</p>
			</object>
		</div>
		<div class="box">
			<object type="image/svg+xml" data="image.svg">
				<p>This image depicts a green, pyramidal triangle.</p>
			</object>
		</div>
		<div class="box">
			<img alt="This image depicts a green, pyramidal triangle." src="image.svg"/>
		</div>
	</body>
</html>

image.svg

Code:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="200px" viewBox="0 0, 400 200">
	<style>
		polygon { fill: lime; stroke-width: 1; stroke: purple; }
	</style>
	<polygon points="220 10, 300 210, 170 250, 123 234"/>
</svg>

DrDOS · 11-16-2012, 01:52 AM

http://www.w3schools.com/svg/svg_examples.asp

Arbitrator · 11-16-2012, 08:13 AM

Quote:

Originally Posted by DrDOS

http://www.w3schools.com/svg/svg_examples.asp

And the point of providing this link is what?