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>
Related
When displaying some SVG icons within an SVG of a fixed width, they should be clipped to the width of that SVG container.
In all sensible browsers this works fine but in IE11 the icons extend beyond the width of the container.
Is there any workaround to counter this behaviour?
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<svg class="task" width="50">
<rect class="task-rectangle" fill="#FFE5E5" width="50" height="50"></rect>
<svg class="svgs-using-def-with-image-href" x="4" y="5">
<use href="#GreenTick" x="0"/>
<use href="#Triangle" x="18"/>
<use href="#Facebook" x="36"/>
</svg>
<svg class="reusable-icons" width="0" height="0">
<defs>
<svg id="GreenTick" width="18" height="18">
<image href="https://svgur.com/i/XvH.svg" width="18" height="18"/>
</svg>
<svg id="Triangle" width="18" height="18">
<image href="https://svgur.com/i/XwA.svg" width="18" height="18"/>
</svg>
<svg id="Facebook" width="18" height="18">
<image href="https://svgur.com/i/Xx8.svg" width="18" height="18"/>
</svg>
</defs>
</svg>
</svg>
</body>
</html>
IE11: Chrome:
IE9-11 & Edge don't properly scale SVG files. You can add height, width, viewBox and CSS rules as workarounds.
I tried the overflow CSS style mentioned, and it works fine. How do you test the code? The reason it doesn't work in your side may be related to the browser cache, please try to clear IE cache and test again.
Edit: I refer to the code you provide, and it has such a problem: If you use the <g> element, I think you also need to use clip CSS to achieve the same effect.
This is a simple sample:
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<svg class="resource-row" data-level="1" x="0" y="0" width="100%" height="576" overflow="hidden">
<g class="task" overflow="hidden" clip-path="url(#clip)">
<rect class="task-rectangle" fill="#FFE5E5" width="50" height="50"></rect>
<svg class="svgs-using-def-with-image-href" x="4" y="5" width="46" overflow="hidden">
<use href="#GreenTick" x="0" />
<use href="#Triangle" x="18" />
<use href="#Facebook" x="36" />
</svg>
</g>
</svg>
<svg class="reusable-icons" width="0" height="0">
<defs>
<rect class="task-rectangle" id="rect" width="50" height="50"></rect>
<clipPath id="clip">
<use xlink:href="#rect" />
</clipPath>
<svg id="GreenTick" width="18" height="18">
<image href="https://svgur.com/i/XvH.svg" width="18" height="18" />
</svg>
<svg id="Triangle" width="18" height="18">
<image href="https://svgur.com/i/XwA.svg" width="18" height="18" />
</svg>
<svg id="Facebook" width="18" height="18">
<image href="https://svgur.com/i/Xx8.svg" width="18" height="18" />
</svg>
</defs>
</svg>
</body>
</html>
Result in IE 11:
I'm trying to pass parameters to the svg, but I'm not doing something wrong can you give me a hand?
Link: codesandbox
Html:
<object type="image/svg+xml" data="button.svg?color=yellow">
<param name="color" value="red" />
<param name="label" value="stop" />
</object>
Svg:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 110 40"
width="100%"
height="100%">
<g>
<rect
id="button_rect"
x="5"
y="5"
width="100"
height="30"
rx="15"
ry="15"
fill="param(color) blue"
stroke="navy"
/>
<text id="button_label" x="55" y="30" text-anchor="middle"
font-size="25" fill="white" font-family="Verdana"
content-value="param(label)">
Ok
</text>
</g>
</svg>
The folks who have written the specs have noted that while this isn't implemented in the browser itself, you need to include a Javascript library. What they left out is where you should include it. Obviously your first thought might be to include it inside the html document but that's not the case - it needs to be included in the .svg file as:
<script type="text/ecmascript" xlink:href="https://dev.w3.org/SVG/modules/ref/master/ref2.js"></script>
Furthermore I'd recommend referencing the parameters using the url(#parameterName) syntax.
For example:
<html>
<head>
<title></title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<object type="image/svg+xml" data="button.svg?fill=red">
<param name="fill" value="blue" />
<param name="stroke" value="red" />
</object>
</body>
</html>
and button.svg:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 110 40"
width="100%"
height="100%">
<defs>
<ref id="paramX" param="fill" default="red"/>
<ref id="paramY" param="stroke" default="blue"/>
</defs>
<g>
<rect
id="button_rect"
x="5"
y="5"
width="100"
height="30"
rx="15"
ry="15"
fill="url(#paramX)"
stroke="url(#paramY)"
/>
<text
id="button_label"
x="55"
y="30"
text-anchor="middle"
font-size="25"
fill="white"
font-family="Verdana" >
Go
</text>
</g>
<script type="text/ecmascript" xlink:href="https://dev.w3.org/SVG/modules/ref/master/ref2.js"></script>
</svg>
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>
I want to refer in HTML src tag to one of multiple svg elements in external file. Is it possible? How?
In HTML page:
<img src="svg5.svg#svg2" height="100px" width="100px">
Here is svg5.svg file content:
<?xml version="1.0" standalone="no"?>
<svg>
<svg id="svg1" width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100" fill="blue">
</svg>
<svg id="svg2" width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100" fill="red">
</svg>
9/1/2019 Update:
Tried also the following, as per #BeccaH advice:
<!DOCTYPE html>
<html>
<body>
<h1>SVG</h1>
<img src="svg5.svg//svg[#id='svg2']" height="100px" width="100px">
</body>
</html>
It didn't work.
I'm using Chrome version 5.0.375.55 and Firefox version 3.5.9 but I can't get the HTML5 code below to display a box.
<!DOCTYPE html> <!-- this tells browser, this is HTML5 -->
<html>
<body>
<svg width="200" height="200">
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg>
</body>
</html>
The following sites stated that my browsers support HTML5 and svg so what gives?
http://caniuse.com/
http://www.html5test.com/
This is how I got it to work
I called the file test.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg>
</body>
</html>
Good luck!
Have you tried using the SVG XML namespace for your tags? Like so:
<html xmlns:svg="http://www.w3.org/2000/svg">
<!-- ... -->
<svg:svg width="200" height="200">
<svg:rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg:svg>
</html>
it worked by saving the file as xhtml, but I'm not sure why.
try in Firefox about:config, search for html and enable "true" value. What next? Wait will Firefox 4.
As for WebKit please read: http://trac.webkit.org/wiki/WebKit%20plus%20SVG. You are not alone. I'm also waiting for SVG.
Firefox 4 will support SVG in HTML. WebKit will probably start working on it in the coming months.