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 apply css style for dynamic tr with td and input tag?

    how to replace a link name text

    How to scale div from jquery css

    CSS How to hide text after a span

    How to create shapes in css? [closed]

    How do I tell CSS to recalculate :first-of-type after DOM dynamically changes?

    How to separate a table cell into two equal parts with different background via css?

    How to add slide animation when showing elements

    how to give conditional comments in firefox for a single css style statement

    How can I align two different-size pieces of text to the left and right while matching baselines?

    How to change color icon in Materialize?

    How do i put text under an img icon in a menu?

    How to achieve this layout with div and css?

    How to use a different stylesheet for iphone or android?

    How can I instantly stop a CSS animation on hover?

    How to add a shadow for underline (bottom border) in css

    How to set focus int o next tab using tab key?

    How to remove the yellow row highlighting

    How to hardware accelerate a box-shadow animation in CSS?

    How to create custom shapes with pseudo classes in CSS3

    How to change the width of an HTML upload field with CSS?

    How to run/debug Web Application project without cache/cookies?

    How to make a split screen video with full height?

    How to correctly impose a background-color to a div wrapping article and aside in HTML/CSS?

    How to style placeholder text color for individual text field?

    How to make a CSS scroll follow div stop follow at a position

    How to set HTML table cell to inherit its size?

    How to style for first class css

    how to apply two classes of css on same element?

    How do you implement CSS without to have clear:both on float left and float right