R
R
romaro2021-10-23 02:33:40
SVG
romaro, 2021-10-23 02:33:40

Is it possible to make this SVG responsive?

That is, for the image to depend on the size of the block html element, the background of which it is. And also get rid of indents vertically and horizontally.

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="" width="" id="Layer_1" version="1.1" viewBox="0 0 512 512" xml:space="preserve" fill="#78cb5f">
<path d="M445.11,304.422l-65.654-41.484l65.188-48.212c3.203-2.364,3.878-6.875,1.51-10.074c-2.364-3.199-6.875-3.874-10.074-1.506  l-92.44,68.363l-0.039-0.031l-0.038,0.031l-92.441-68.363c-3.194-2.368-7.705-1.693-10.074,1.506  c-2.364,3.199-1.688,7.71,1.511,10.074l65.188,48.212l-65.65,41.484c-3.365,2.127-4.368,6.576-2.24,9.941  c1.37,2.167,3.703,3.358,6.095,3.358c1.32,0,2.647-0.361,3.844-1.118l70.382-44.474l19.144,14.162  c1.27,0.939,2.775,1.413,4.281,1.413c1.507,0,3.013-0.474,4.286-1.413l19.139-14.162l70.383,44.474  c1.195,0.757,2.527,1.118,3.844,1.118c2.392,0,4.728-1.191,6.095-3.358C449.473,310.998,448.472,306.549,445.11,304.422z"/>
<path d="M438.463,160.325H248.737c-27.857,0-50.521,24.694-50.521,55.045v81.256c0,30.354,22.664,55.049,50.521,55.049h189.727  c27.862,0,50.525-24.694,50.525-55.049V215.37C488.989,185.019,466.325,160.325,438.463,160.325z M472.451,296.626  c0,20.448-15.214,37.028-33.988,37.028H248.737c-18.77,0-33.983-16.58-33.983-37.028V215.37c0-20.447,15.214-37.023,33.983-37.023  h189.727c18.774,0,33.988,16.576,33.988,37.023V296.626z"/>
<path d="M161.824,204.391H31.176c-4.507,0-8.164,3.656-8.164,8.164c0,4.511,3.657,8.168,8.164,8.168h130.648  c4.503,0,8.16-3.657,8.16-8.168C169.985,208.048,166.327,204.391,161.824,204.391z"/>
<path d="M163.583,245.798H61.115c-3.533,0-6.402,3.653-6.402,8.164c0,4.507,2.869,8.168,6.402,8.168h102.468  c3.538,0,6.402-3.661,6.402-8.168C169.985,249.451,167.12,245.798,163.583,245.798z"/>
<path d="M164.965,287.2H84.598c-2.776,0-5.02,3.657-5.02,8.164c0,4.512,2.244,8.168,5.02,8.168h80.367  c2.771,0,5.02-3.656,5.02-8.168C169.985,290.857,167.737,287.2,164.965,287.2z"/></svg>

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
A person from Kazakhstan, 2021-10-23
@LenovoId

I did not quite understand what it means to "make svg adaptive"?
SVG can be made fluid, that is, so that it takes up all the space in width
In your svg, you just had to fix the viewBox: https://codepen.io/topicstarter/pen/ZEJLbem

A
alexalexes, 2021-10-23
@alexalexes

How to get rid of padding in a vector image file.
Or:
1) Open the svg file in a vector editor like Inkscape.
2) Reduce the viewport of the canvas to the protruding elements of the image.
3) Save the changes and use the new version of the svg file.
Or, in the existing data, manually select a "box" without indents. Here are the numbers I got.
<svg ... viewBox="23 160 466 192"
Tested on such a div block. Changed its width and height to see the borders of the svg.
Responsiveness in svg as background div works.

<style>
    div.container
    {
      width: 120px;
      height: 50px;
      background: url(1.svg) no-repeat;
      border: 1px solid black;
    }
  </style>
  <div class="container">
  </div>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question