Answer the question
In order to leave comments, you need to log in
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
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
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 questionAsk a Question
731 491 924 answers to any question