Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Styling with an SVG tag

    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.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by johnsmith153 View Post
    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)?
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by johnsmith153 View Post
    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>
    Last edited by Arbitrator; 11-16-2012 at 08:12 AM. Reason: I removed extraneous information (of unknown origin) at the end of my post.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,182
    Thanks
    15
    Thanked 253 Times in 253 Posts

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    And the point of providing this link is what?
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •