Make SVG responsive

Question

Make SVG responsive

Navigation

#1 by (3 votes)

3

I can not manipulate the size of this hex, I would like it initially to have the size of 165x165px, and respectively make it responsive.

I do not have much experience with SVG.

<svg width="165" height="165">

            <image xlink:href="http://garethlewis.cool/img/photography/square/times-square-fisheye.jpg" width="165" height="165" preserveAspectRatio="xMidYMid" clip-path="url(#clip)"></image>

            <defs>
                <clipPath id="clip">
                    <path d="M96.228,74.308 C92.786,80.643 83.583,86.058 77.115,89.716 C69.795,93.856 59.356,99.584 50.835,99.982 C43.307,100.333 33.742,95.509 27.156,92.046 C19.702,88.126 9.232,82.448 4.607,75.674 C0.521,69.69 0.16,59.451 0.041,52.33 C-0.094,44.27 -0.124,32.864 3.772,25.692 C7.214,19.357 16.417,13.942 22.885,10.284 C30.205,6.144 40.644,0.416 49.165,0.018 C56.693,-0.333 66.258,4.491 72.844,7.954 C80.298,11.874 90.768,17.552 95.393,24.326 C99.479,30.31 99.84,40.549 99.959,47.67 C100.094,55.73 100.124,67.136 96.228,74.308 z"></path>
                </clipPath>
            </defs>

        </svg>

svg vector

asked by anonymous 21.07.2015 / 15:41

1 answer

Index and automatic values How to set index when inserting item in JComboBox?

score 3 · Accepted Answer

To be proportional / responsive I think you have to define a default size for which svg should be 165px. So using the preserveAspectRatio and the viewBox You can do this (example for 1650 x 1650 screen):

<svg width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1650 1650">

jsFiddle: link

viewBox :

The viewBox attribute allows you to specify a given set of graphics to fit a particular container element.

Freely translated:
  The viewBox allows a given group of graphics to adapt to a container element.