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.
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 can't seem to get a foreignObject to work from within an SVG pattern. I can get it to work on its own, but not in a pattern. I've had a quick look around:
its listed as a valid content element for a pattern in SVG 1.1 and SVG 2.0
Its used in this accepted answer
Something about not allowing foreignObject and svg:use, but I don't know if its relevant
so I'm at a loss really what I'm doing wrong. I've added a contrived snippet to reproduce below, but I'm specifically interested in arbitrary html in a foreignObject, in a pattern.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML inside SVG</title>
<style type="text/css"></style>
</head>
<body>
<svg width="500" height="300" style="border:1px red solid" xmlns="http://www.w3.org/2000/svg">
<!-- doesn't work -->
<pattern id=tex width=100 height=100>
<foreignObject x="0" y="0" width="100" height="100">
<img xmlns="http://www.w3.org/1999/xhtml" src="https://i.picsum.photos/id/258/200/200.jpg" x="0" y="0" width="100" height="100" />
</foreignObject>
</pattern>
<pattern id=tex2 width=100 height=100>
<circle fill=blue cx=50 cy=50 r=50 width=100 height=100></circle>
</pattern>
<!-- foreignObject on its own works -->
<foreignObject x="0" y="0" width="200" height="100">
<img xmlns="http://www.w3.org/1999/xhtml" src="https://i.picsum.photos/id/258/200/200.jpg" x="0" y="0" width="100" height="100" />
</foreignObject>
<!-- pattern with foreignObject doesn't work-->
<rect fill="url(#tex)" stroke="black" x=0 y=100 width="100" height="100"/>
<!-- basic pattern works-->
<rect fill="url(#tex2)" stroke="black" x=0 y=200 width="100" height="100"/>
</svg>
</body>
</html>
I’m afraid it looks like browsers don’t support this, even though the spec says it’s valid.
https://bugzilla-dev.allizom.org/show_bug.cgi?id=1348768
https://bugzilla-dev.allizom.org/show_bug.cgi?id=486240
Here’s another demo of the issue from 2014 codepen.io/yoksel/details/BidHq (SO won’t let me post the link without accompanying code, but the code is irrelevant in this case)
When I draw SVG stripes with a pattern and print it in Google Chrome, some lines become ugly like this.
This does not happen in other browsers. For example, in Microsoft Edge, like this.
How can I print this properly in Google Chrome? Or is there anything wrong in this code?
Here is my code.
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<pattern id="pattern_qET8y" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
<line x1="0" y="0" x2="0" y2="10" stroke="#24194D" stroke-width="1" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#pattern_qET8y)"/>
</svg>
</body>
</html>
My code below is not working as expected. Not showing the image in the background of the rectangle.
<html>
<body>
<svg width="600" height="700">
<rect width="300" height="400" class="eq__NEcontainer__currentAlarmAction" style="fill:url(#godhelpme);">
<title stroke="blue">My test</title>
</rect>
<defs id="godhelpme">
<pattern width="200" height="200" x="0" y="0" patternUnits="userSpaceOnUse">
<image width="200" height="200" class="eq__NEcontainer__currentAlarmAction" xlink:href="CurrentList.png"></image>
</pattern>
</defs>
</svg>
</body>
</html>
The rectangle is always black as in the image. Any ideas ?. I have tried debugging using chrome. In the debugger clicking on the image tag shows empty. I have attached the images for reference.. Any help would be of greatly appreciated.
You cannot reference a <defs> element as the fill, you want the <pattern>. So put the id on the <pattern> element instead. Also in general you should aim to put your <defs> elements before where they're used, it's more efficient that way.
Like this:
<html>
<body>
<svg width="600" height="700">
<defs>
<pattern id="godhelpme" width="200" height="200" x="0" y="0"
patternUnits="userSpaceOnUse">
<image width="200" height="200"
class="eq__NEcontainer__currentAlarmAction"
xlink:href="CurrentList.png"></image>
</pattern>
</defs>
<rect width="300" height="400" class="eq__NEcontainer__currentAlarmAction"
style="fill:url(#godhelpme);">
<title stroke="blue">My test</title>
</rect>
</svg>
</body>
</html>
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>