CODEWITHSUNDEEP
svg
The Chinky Sight
The Chinky Sight

Reputation: 390

How can I remove spaces around a SVG?

I know there are a lots of posts related to this, I had checked all of them and I was not able to get a proper solution for my problem that's why I post this question.

I have a SVG like this:

enter image description here

As you can see that this SVG has no spaces around left and top, but it has some spaces around right and bottom. How can I remove the spaces which at bottom and right side of it?

SVG's source code: stackoverflow's body can have only up-to 30000 characters only but the SVG's source code has more characters than the limitation. Due to reason I had to upload the code at this Gist. I am really sorry for the inconvenience :(

Upvotes: 1

Views: 2010

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14545

To see the borders of the SVG canvas I added to the header of the SVG file red border style

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 768" version="1.1" 
 style="border:1px solid red;">

Your image is shifted left and up so there are empty spaces on the right and bottom

jsfiddle

The image shift is performed by the command:

<g id="girl" transform="translate(-35.000000, -89.000000)">
Remove this command or set the coordinates to zero

<g id="girl" transform="translate(0, 0)">

jsfiddle

As a result, the empty spaces will disappear and the image will occupy the entire SVG canvas.

Upvotes: 1

Related Questions