Make SVG responsive

Asked

Viewed 294 times

3

I cannot manipulate the size of this Hexagon, I wish it initially had the size of 165x165px, and respectively make it responsive.

I don’t 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

  • SVG itself is already a responsive graphic image, you can change the size of the browser as much as you want, that the image will not lose its quality

  • @Marcelobonifazio yes, but I do not know what is happening, test the image please it does not stay in the size I am applying, there is something wrong

  • http://jsfiddle.net/gk5yzchx/ now, you wanted that when decreasing or increasing the browser, it continued respecting these same proportions?

  • @Marcelobonifazio I want specifically what I described, initially I need her to stay at the size of 165x165 and then I keep the ratio, as you can see, it doesn’t get at 165 it gets smaller than the picture

  • @Marcelobonifazio I believe the error is in the clippath and this is what I can not change, or I am wrong?

  • 2

    @Pablocampina, when you say it starts at 165, what’s the screen size? To be proportional/responsive I think you need to define a standard size for which svg should be 165px. Example for 1650 x 1650: http://jsfiddle.net/d18jvfkj/

  • 1

    @Sergio thank you so much, you solved my problem, hug.

  • Okay, I’ll add an answer

Show 3 more comments

1 answer

3


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

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

jsFiddle: http://jsfiddle.net/d18jvfkj/

viewBox:

The viewBox attribute Allows to specify that a Given set of Graphics stretch to fit a particular container element.

Freely translated:
viewBox allows a given set of charts to adapt to a container element.

Browser other questions tagged svg vector

You are not signed in. Login or sign up in order to post.