CODEWITHSUNDEEP
htmlimagesvg
Adam
Adam

Reputation: 20882

Inline SVG - How to Put an image.svg onto a Page

I'm only new to Inline SVG and from my reading it sounds really interesting. I expecially like the way it can maintain multiple colors (which are currently lost ith icon fonts).

Following is an graphic created in Adobe Illistrator and exported as an SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.1, 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="265.427px" height="105.59px" viewBox="0 0 265.427 105.59" enable-background="new 0 0 265.427 105.59"
     xml:space="preserve">
<g id="Edit_Button_1_">
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="132.7144" y1="10.8496" x2="132.7144" y2="90.4107">
        <stop  offset="0.099" style="stop-color:#F5F6F6"/>
        <stop  offset="0.8267" style="stop-color:#E9E9E9"/>
    </linearGradient>

        <rect x="0.474" y="0.474" fill="url(#SVGID_1_)" stroke="#CDCCCC" stroke-width="0.9479" stroke-miterlimit="10" width="264.479" height="104.643"/>
    <g>
        <g>
            <g>
                <g>
                    <polygon fill="#6F6F6F" points="27.945,62.067 20.953,83.479 42.234,76.368                   "/>
                </g>
                <g>
                    <path fill="#6F6F6F" d="M67.206,22.81c3.765-3.827,9.988-3.805,14.024,0.166c4.024,3.969,4.154,10.186,0.39,14.013
                        L67.206,22.81z"/>
                </g>
                <polygon fill="#6F6F6F" points="45.999,72.609 31.698,58.312 62.865,27.153 77.16,41.45               "/>
            </g>
        </g>
    </g>
    <text transform="matrix(1 0 0 1 100.8813 74.3232)" fill="#6F6F6F" font-family="'Verdana'" font-size="57.8802">EDIT</text>
</g>
</svg>

I'm confussed on how to put this onto a HTML page. Do I just copy the <svg> to </svg> tags?

Is there any conversion/optimisation required?

I've also read about defining SVG Files for later use: http://css-tricks.com/svg-sprites-use-better-icon-fonts/

What are the advantages/disadvantages of this?

thankyou so much!!

Upvotes: 0

Views: 94

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

Yes. You only need to copy the <svg> section. The XML pre-amble lines (<?xml> and <!DOCTYPE>) are not required.

Demo here

Upvotes: 1

Related Questions