How to provide responsive design for svg?


Tags: html,css,svg,raphael

Problem :

I am new to raphael. I wrote svg tag inside div. Please see this sample http://jsfiddle.net/dhana36/bvs6P/1/

Use the CTRL+ and CTRL- and you will find the difference.

HTML:

<div class="outer">
<svg height="640" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 640" preserveAspectRatio="xMinYMin" style="overflow: hidden; position: relative; left: -0.625px;" class="stretchBar">
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
Created with Raphaël 2.1.0
</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
<path fill="none" stroke="#000000" d="M228,109L228,110Z" stroke-width="200px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>

</svg>
</div>

css:

.outer{

    width:30%;
    height:30%;
}

How to implement svg responsive with content ?



Solution :

I don't believe this question deserves the downvote it received simply because it wasn't phrased from a perspective of understanding, so I am counteracting the downvote with an upvote.

SVG elements are intrinsically responsive within their defined viewbox (which, as Robert pointed out, must be defined absolutely). All you need to do is to define the viewbox over the area you want to work with, provide content that fills that area, and then make the width and height of the svg element relative to the size of its parent div (i.e., proportionally), and the SVG element will automatically scale its content to match.

Here is an example of a more sophisticated SVG behaving in a responsive fashion: http://jsfiddle.net/kevindivdbyzero/qMSLs/1/

The relevant items to notice are the svg definition

<svg version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin" style="overflow: hidden; position: relative; left: -0.5px;" class="stretchBar">

and the CSS style for your container element (div.outer) and the svg element itself:

.outer{    
    width:50%;
    height:50%;
}

.adaptive-svg {
    width: 100%;
    min-width: 250px;
    height: auto;
}

    CSS Howto..

    How to auto width a form element with CSS?

    My div box isn't showing up, what am I doing wrong? [closed]

    How to make a transparent border using CSS?

    How to style image in variable? [closed]

    How can I include the CSS file in CodeIgniter?

    How to make a wrapper for HTML, CSS and Javascript Pages in iOS

    How to change css styles of a jQuery plugin?

    How do I make an image act as a video overlay?

    How can I add spaces between two lines using CSS?

    How can i find and change css style in ruby?

    xHTML/CSS: How to make inner div get 100% width minus another div width

    How to call an HTML css style in a computed text field

    How to fit textarea exactly inside a div - CSS

    How to set the width of my table columns to a fixed value?

    How to use “Wedding text ” in Css font family?

    Django-Bower + Foundation 5 + SASS, How to configure?

    CSS media queries [how to transform to hyperlinks via media queries]

    How to @import without including all CSS but just the @extends ones

    How to have an array of images side by side using css/html

    HTML/CSS: How to make “password” input show the password?

    How to apply different css style to gwt datagrid widget in the same page? [duplicate]

    How do I set jQuery accordion default to unopened? And toggle open/closed?

    how do i inject css in gwt?

    How can I scale the space taken by a scaled element

    How to create an interactive image with HTML5, Javascript, DOM and CSS

    How to align 2 divs inside one div container with CSS (see image)

    How to workaround: IE6 does not support CSS “attribute” selectors

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    How to persist checking the screen width in Javascript

    css how to depend one div to another one in auto adjusting width