Svg image cropping

Question

There is a svg-image in which from the border of the overall image to the actual beginning of the image there is a white background that surrounds the image from all sides and creates indents, which interferes with the layout.

How can svg be cut to size? What piece of code is responsible for the background image?

There is no illustrator, cropping with hands will not work, there is only a code.

<?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve" width="388px" height="254px"> <path style="fill:#41479B;" d="M503.172,423.725H8.828c-4.875,0-8.828-3.953-8.828-8.828V97.104c0-4.875,3.953-8.828,8.828-8.828 h494.345c4.875,0,8.828,3.953,8.828,8.828v317.793C512,419.772,508.047,423.725,503.172,423.725z"/> <path style="fill:#F5F5F5;" d="M512,97.104c0-4.875-3.953-8.828-8.828-8.828h-39.495l-163.54,107.147V88.276h-88.276v107.147 L48.322,88.276H8.828C3.953,88.276,0,92.229,0,97.104v22.831l140.309,91.927H0v88.276h140.309L0,392.066v22.831 c0,4.875,3.953,8.828,8.828,8.828h39.495l163.54-107.147v107.147h88.276V316.578l163.54,107.147h39.495 c4.875,0,8.828-3.953,8.828-8.828v-22.831l-140.309-91.927H512v-88.276H371.691L512,119.935V97.104z"/> <g> <polygon style="fill:#FF4B55;" points="512,229.518 282.483,229.518 282.483,88.276 229.517,88.276 229.517,229.518 0,229.518 0,282.483 229.517,282.483 229.517,423.725 282.483,423.725 282.483,282.483 512,282.483 "/> <path style="fill:#FF4B55;" d="M178.948,300.138L0.25,416.135c0.625,4.263,4.14,7.59,8.577,7.59h12.159l190.39-123.586H178.948z"/> <path style="fill:#FF4B55;" d="M346.388,300.138H313.96l190.113,123.404c4.431-0.472,7.928-4.09,7.928-8.646v-7.258 L346.388,300.138z"/> <path style="fill:#FF4B55;" d="M0,106.849l161.779,105.014h32.428L5.143,89.137C2.123,90.54,0,93.555,0,97.104V106.849z"/> <path style="fill:#FF4B55;" d="M332.566,211.863L511.693,95.586c-0.744-4.122-4.184-7.309-8.521-7.309h-12.647L300.138,211.863 H332.566z"/> </g> </svg>

Solution found - edit coordinates in the viewBox attribute

Well or not, did you do it in adobe ilustrator, cut it there
I do not believe that there is no ready-made UK flag in the SVG in the Internet in the normal form

Accepted Answer · 2016-10-23T16:51:15

So, the solution was found.

In the original image, in the first place, we are confused by the indentation from below and above, which are added to the actual size of the image and distort the height. The image width is 100% and depends only on the container.

Therefore, you need to adjust the position of the image in height, the width will stretch itself.

The item has an attribute

 viewBox="min-x, min-y, width, height"

which controls the svg container (indicates the initial position of the coordinates and the size of the element-container).

In our case, in order to remove the void from above - we change the value of min-y, the void from below - we reduce the height of the container by the coordinate height. The result of this is viewBox = "0 88 512.001 335":

 <?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 88 512.001 335" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve" width="388px" height="254px"> <path style="fill:#41479B;" d="M503.172,423.725H8.828c-4.875,0-8.828-3.953-8.828-8.828V97.104c0-4.875,3.953-8.828,8.828-8.828 h494.345c4.875,0,8.828,3.953,8.828,8.828v317.793C512,419.772,508.047,423.725,503.172,423.725z"/> <path style="fill:#F5F5F5;" d="M512,97.104c0-4.875-3.953-8.828-8.828-8.828h-39.495l-163.54,107.147V88.276h-88.276v107.147 L48.322,88.276H8.828C3.953,88.276,0,92.229,0,97.104v22.831l140.309,91.927H0v88.276h140.309L0,392.066v22.831 c0,4.875,3.953,8.828,8.828,8.828h39.495l163.54-107.147v107.147h88.276V316.578l163.54,107.147h39.495 c4.875,0,8.828-3.953,8.828-8.828v-22.831l-140.309-91.927H512v-88.276H371.691L512,119.935V97.104z"/> <g> <polygon style="fill:#FF4B55;" points="512,229.518 282.483,229.518 282.483,88.276 229.517,88.276 229.517,229.518 0,229.518 0,282.483 229.517,282.483 229.517,423.725 282.483,423.725 282.483,282.483 512,282.483 "/> <path style="fill:#FF4B55;" d="M178.948,300.138L0.25,416.135c0.625,4.263,4.14,7.59,8.577,7.59h12.159l190.39-123.586H178.948z"/> <path style="fill:#FF4B55;" d="M346.388,300.138H313.96l190.113,123.404c4.431-0.472,7.928-4.09,7.928-8.646v-7.258 L346.388,300.138z"/> <path style="fill:#FF4B55;" d="M0,106.849l161.779,105.014h32.428L5.143,89.137C2.123,90.54,0,93.555,0,97.104V106.849z"/> <path style="fill:#FF4B55;" d="M332.566,211.863L511.693,95.586c-0.744-4.122-4.184-7.309-8.521-7.309h-12.647L300.138,211.863 H332.566z"/> </g> </svg>

If someone points out the shortcomings of the method, I will be glad

the height corresponds to the target picture, the width automatically adjusts to the block, the proportions of the image are saved on any scale.

Answer 2 · 2016-10-23T15:04:30

Well, in general, if 'we' cannot edit svg, then we can take svg and wrap it in a div with the necessary styles and overflow:hidden; and get a fully managed svg - see the code

 * { margin: 0; padding: 0; } .svg-art { width: 510px; height: 336px; border: 1px solid transparent; position: relative; overflow: hidden; border-radius: 9px; margin: 30px auto; } #Layer_1 { position: absolute; top: -88px; }

 <div class="svg-art"> <svg version="1.1" id="Layer_1" width="510px" height="440px"> <path style="fill:#414798;" d="M503.172,423.725H8.828c-4.875,0-8.828-3.953-8.828-8.828V97.104c0-4.875,3.953-8.828,8.828-8.828 h494.345c4.875,0,8.828,3.953,8.828,8.828v317.793C512,419.772,508.047,423.725,503.172,423.725z" /> <path style="fill:#F5F5F5;" d="M512,97.104c0-4.875-3.953-8.828-8.828-8.828h-39.495l-163.54,107.147V88.276h-88.276v107.147 L48.322,88.276H8.828C3.953,88.276,0,92.229,0,97.104v22.831l140.309,91.927H0v88.276h140.309L0,392.066v22.831 c0,4.875,3.953,8.828,8.828,8.828h39.495l163.54-107.147v107.147h88.276V316.578l163.54,107.147h39.495 c4.875,0,8.828-3.953,8.828-8.828v-22.831l-140.309-91.927H512v-88.276H371.691L512,119.935V97.104" /> <polygon style="fill:#FF4B55;" points="512,229.518 282.483,229.518 282.483,88.276 229.517,88.276 229.517,229.518 0,229.518 0,282.483 229.517,282.483 229.517,423.725 282.483,423.725 282.483,282.483 512,282.483 " /> <path style="fill:#FF4B55;" d="M178.948,300.138L0.25,416.135c0.625,4.263,4.14,7.59,8.577,7.59h12.159l190.39-123.586H178.948z" /> <path style="fill:#FF4B55;" d="M346.388,300.138H313.96l190.113,123.404c4.431-0.472,7.928-4.09,7.928-8.646v-7.258 L346.388,300.138z" /> <path style="fill:#FF4B55;" d="M0,106.849l161.779,105.014h32.428L5.143,89.137C2.123,90.54,0,93.555,0,97.104V106.849z" /> <path style="fill:#FF4B55;" d="M332.566,211.863L511.693,95.586c-0.744-4.122-4.184-7.309-8.521-7.309h-12.647L300.138,211.863 H332.566z" /> </svg> </div>

sandbox example of adaptive svg

in your way, we depend on the size of the image and adjust the indents.
pruning is needed to just get rid of white fields, and not to hide them - they interfere with the layout
it's the same thing, your business, removed all the extra fields at the expense of the block - and the rest is a matter of technique - like a regular layout
@ while1pass svg is essentially an image too, and you have to behave with it as with ʻimg`
@ while1pass, "the beauty of svg is just in editing with a simple text editor" but if it is a fill color or if it is a simple figure.
It is necessary to recalculate the origin (and, accordingly, all other coordinates).
As for me, the beauty is just that you can draw anything in a graphics editor, and then insert it into the code.)
@Geyan decided, two numbers were enough, the styles can not be prigritsya

Svg image cropping

2 answers 2

More articles: