Why is there transparent area around my svg?

Question

I made an svg image for on my site. When I use it though it looks like this:

There is alot of transparent area around it where I would say it could expand.
There doesn't seem to be any transparent area in the svg image itself.
When I use a png it works fine, just with the svg it creates this blank area.
I just gave the image a red background to see where the image actually is.

This is my css:

#logo {
    position: absolute;
    left: 0;
    top: 0;
    background-color: red;
    width: 200px;
    height: 50px;
}

#logo directs to the <img> in my html:

<img src="Sources/FruityJuice Logo.svg" alt="FruityJuiceLogo" id="logo">

Answer 1

In Adobe Illustrator I cropped the file to the logo like Yong Pin said and that seems to have fixed it.