CODEWITHSUNDEEP
csssvg
curious1
curious1

Reputation: 14737

How to display this SVG image where the img tag is

I am given a SVG file with the following content (a plus icon in black):

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
     width="1460px" height="610px" viewBox="0 0 1460 610" enable-background="new 0 0 1460 610" xml:space="preserve">
<g>
    <path d="M746.602,304h-16v-16H729v16h-16v1.602h16v16h1.602v-16h16V304z M746.602,304"/>
</g>
</svg>

I would like to display it in a page with the following tag:

<img src="plus-icon-black.svg">

However the plus sign is displayed quite far from where the img tag is.

How can I display the svg image where the img tag is?

Upvotes: 0

Views: 661

Answers (1)

Aziz
Aziz

Reputation: 7793

Your SVG image was saved with huge amounts of whitespace around the + shape.

Here is a clean version:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="449.1 991.8 33.6 33.6">
  <path d="M482.7 1007.8h-16v-16h-1.6v16h-16v1.6h16v16h1.6v-16h16v-1.6z"/>
</svg>

You can control the size with CSS or using the <img> width or height attributes. Please reduce the artboard size to your shape's bounding-box when exporting to SVG in Illustrator.

Upvotes: 1

Related Questions