I want to load an external svg file into my Html document at runtime. As discussed here, I use an <object type="image/svg+xml"></object> and change the data attribute via Javascript.
My html looks like this (pasted the cross.svg file in below for reference):
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<object id="svg_verified" type="image/svg+xml" data="cross.svg"></object>
<svg>
<circle cx="50" cy="50" r="50" fill="#111"/>
<rect y="-5" width="140" height="10" fill="white" transform="rotate(45)"/>
<rect y="-5" width="140" height="10" fill="white" transform="translate(100,0) rotate(135)"/>
</svg>
</body>
</html>
The loaded page looks like this:
However, I can see in the inspector that the svg file is loaded:
How do I make the SVG file in the object render correctly?
You are missing xmlns="http://www.w3.org/2000/svg". The xmlns attribute is required for image/svg+xml MIME type.
Are SVG parameters such as 'xmlns' and 'version' needed?
<object type="image/svg+xml" data="https://svgshare.com/i/GhM.svg"></object>
<!---->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="50" fill="#111"/>
<rect y="-5" width="140" height="10" fill="white" transform="rotate(45)"/>
<rect y="-5" width="140" height="10" fill="white" transform="translate(100,0) rotate(135)"/>
</svg>
Related
I've edited this question because my previous one might actually reduce to this....why am I seeing nothing here when I expect to see a circle with filled with an image:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg width="100" height="100">
<defs>
<pattern patternUnits="userSpaceOnUse" height="100" width="100">
<image id="image-JON" x="27.3" y="27.3" height="45.3515625" width="45.3515625" xlink:href="https://keithmcnulty.github.io/game-of-thrones-network/img/jon.png">
</image>
</pattern>
</defs>
<circle cx="50" cy="50" r="20.408203125" fill="url(#image-JON)">
</circle>
</svg>
</body>
Solved, its the pattern tag that needs the ID, not the image tag:
<svg width="100" height="100">
<defs>
<pattern id="image-JON" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="27.3" y="27.3" height="45.3515625" width="45.3515625" xlink:href="https://keithmcnulty.github.io/game-of-thrones-network/img/jon.png">
</image>
</pattern>
</defs>
<circle cx="50" cy="50" r="20.408203125" fill="url(#image-JON)">
</circle>
</svg>
I've used this way (you could see the codepen) to display image background in my logo letters. Now, i want to display a video instead of the image.
https://codepen.io/irawachaloco/pen/GJKLzy
<svg class='crop-shapes'>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="650">
<image class='twombly' xlink:href="http://gastv.mx/wp-content/uploads/2014/05/jumex.jpg" x="-30" y="-30"
width="380" height="267" />
</pattern>
</defs>
<circle class='circ' cx="50" cy="50" r="50" fill="url(#img1)" filter="url(#sparklin)" onmouseover="evt.target.setAttribute('opacity', '0.5');"
13
onmouseout="evt.target.setAttribute('opacity','1)');"/>
<rect x="110" y="0" width="100" height="100" stroke="black" fill="url(#img1)" filter="url(#sparklin)"/>
<polygon x="10" points="270,0 220,100 320,100" fill="url(#img1)" filter="url(#sparklin)"/>
</svg>
Any idea or example ? I'm a noob with svg practices..
Thanks a lot !
I am using the code below to put an image in an SVG and some bunch of text directly below it:
<td>
<table>
<tr>
<td>
<svg width="200" height="250">
<defs>
<clipPath id="circleView">
<circle cx="50" cy="50" r="50" fill="#FFFFFF" />
</clipPath>
</defs>
<image width="100" height="100"
xlink:href="http://etc.usf.edu/clipart/63300/63348/63348_clock_500_md.gif" clip-path="url(#circleView)" />
<text baseline-shift="-130px" text-anchor="bottom" class="smallh2">headertext</text>
<text baseline-shift="-160px" text-anchor="bottom" class="smallh2" id="objecta"></text>
</svg>
</td>
</tr>
</table>
</td>
The first<text> shows the heading while the second one calls a html element which has a figure.
The above code works pretty well in Google Chrome but somehow doesn't show the text in IE and Edge.
Replace baseline-shift with y for text. It works in all browsers.
<svg width="200" height="250">
<defs>
<clipPath id="circleView">
<circle cx="50" cy="50" r="50" fill="#FFFFFF" />
</clipPath>
</defs>
<image width="100" height="100"
xlink:href="http://etc.usf.edu/clipart/63300/63348/63348_clock_500_md.gif" clip-path="url(#circleView)" />
<text y="130" text-anchor="bottom" class="smallh2">headertext</text>
<text baseline-shift="-160px" text-anchor="bottom" class="smallh2" id="objecta"></text>
</svg>
my svg is just text over a circke with full screen rectangle
svg
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red"/>
<circle cx="150" cy="100" r="80" fill="green"/>
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>
</svg>
When in img src it is arbitriraly truncated at the bottom why ? How to fix this ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<img src="hello.svg" type="image/svg+xml">
</body>
</html>
Specify the width, height and viewPort attributes of svg.
<svg version="1.1" width="300" height="200" viewPort="0 0 300 200" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>
</svg>
You have not specified any size for the <img> or <svg> so the browser is choosing the default size for indeterminate sized objects, which is 300x150. So your circle will get cut off at the bottom. The solution, as chipChocolate has already pointed out, is to give one or the other an appropriate size.
Who has an idea or a hint
I would like to embed a svg object inside die svg Tag and change this parameter
HTML/SVG (not going on)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<svg width="2000" height="2000">
<object type="image/svg+xml" data="lamp.svg" style="width: 450px; height:150px;">
<param name="color" value="yellow" />
</object>
</svg>
</body>
</html>
SVG File lamp.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40" height="40">
<title>lamp</title>
<circle cx="30" cy="30" r="15" fill="param(color)" stroke-width=""/>
</svg>
With the IMAGE TAG no tag parameter passing is possible.
<image x="0" y="0" width="20" height="20" xlink:href="lamp.svg"><param name="color" value="yellow" /></image>
Currently browsers don't support passing parameters this way, though there's an SVG Parameters spec being developed by W3C. The examples in the spec use a script to emulate support for the feature.
Note: the shim param.js goes in the SVG file, not the html file:
e.g.,
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
width="68" height="68">
<rect x="10" y="10" height="48" width="48" stroke="black" stroke-width="1" fill="param(color) red">
</rect>
<rect x="29" y="0" height="10" width="10" fill="black"></rect>
<text x="24" y="46" fill="param(text) black" style="font-size:32px;"
content-value="param(number) 1">1</text>
<script type="text/ecmascript" xlink:href="param.js" />
</svg>