CODEWITHSUNDEEP
htmlimagesvg
AGamePlayer
AGamePlayer

Reputation: 7736

Is there a way to fix the HTML validation error? While keeping using the SVG as the source code of the `<img>` tag?

Is there a way to fix the HTML validation error? While keeping using the SVG as the source code of the <img> tag?

Error: Bad value data:image/svg+xml;utf8,<svg 
xmlns='http://www.w3.org/2000/svg' height='10px' width='20px'></svg> 
for attribute src on element`

My source code:

<img alt="homepage" src="data:image/svg+xml;utf8,<svg 
xmlns='http://www.w3.org/2000/svg' height='10px' width='20px'></svg>"
/>

Upvotes: 0

Views: 439

Answers (3)

Martin
Martin

Reputation: 22760

For inline SVG; <svg> tags can be inserted as <svg> elements directly into the HTML and not part of the <img> tag. As it is inline SVG the <img> tag is pretty redundant as all the required parameters can be held inside the <SVG>.

Read about it here

Example:

    <html>
    <head>
    <title>SVG Demo</title>
    </head>
    <body>
    
    <svg
      viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
      style="width:35%; height:35%; position:absolute; top:0; left:0; z-index:-1;">
      <linearGradient id="gradient">
        <stop class="begin" offset="0%"/>
        <stop class="end" offset="100%"/>
      </linearGradient>
      <rect x="0" y="0" width="100" height="100" style="fill:#cc9966;" />
      <circle cx="50" cy="50" r="30" style="fill:#f9f333;" />
    </svg>
    </body>
    </html>

Upvotes: -1

Sean
Sean

Reputation: 8040

To use an SVG as a data URI within an <img> element, the SVG code needs to be escaped:

<img alt="homepage" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10px' width='20px'%3E%3C/svg%3E">

There are several free tools for doing this, such as URL-encoder for SVG.

Upvotes: 3

Benjamin Rochez
Benjamin Rochez

Reputation: 176

If you want a non-interactive svg, use with script fallbacks to png version (for older IE and android < 3). One clean and simple way to do that:

<img src="your.svg" onerror="this.src='your.png'">

your.svg being the path to your svg.

This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play.

If you want an interactive svg, use either <iframe> or <object>.

If you need to provide older browsers the ability to use an svg plugin, then use <embed>.

For svg in css background-image and similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically:

div {
    background-image: url(fallback.png);
    background-image: url(your.svg), none;
}

An additional good read is this blogpost on svg fallbacks.

Upvotes: 0

Related Questions