curious1 curious1 - 1 year ago 78
CSS Question

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" "">
<svg version="1.1" id="Layer_1" xmlns="" xmlns:xlink="" x="0px" y="0px"
width="1460px" height="610px" viewBox="0 0 1460 610" enable-background="new 0 0 1460 610" xml:space="preserve">
<path d="M746.602,304h-16v-16H729v16h-16v1.602h16v16h1.602v-16h16V304z M746.602,304"/>

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?


Answer Source

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

Here is a clean version:

<svg xmlns="" 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"/>

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download