SVG Foreign Object not displaying with SVG Namespace - svg

I have the following SVG file.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--<svg width="100%" height="500">-->
<svg id="deviceImage" class="DeviceImage" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin" currentScale="1" width="3000px" height="1500px" oncontextmenu="return false">
<script type="text/ecmascript">
<![CDATA[
function ExmpleFunction(event, componentGroup)
{
alert('Hello World');
}
]]>
</script>
<defs>
<!-->>>TestShape>>>-->
<symbol id="TestShape">
<polygon points="1,1 650,1 630,175 21,175"></polygon>
</symbol>
<!--<<<TestShape<<<-->
</defs>
<!--TestShape-->
<g id="p1" transform="translate(50, 35)" visibility="visible">
<use id="p2Basic" xlink:href = "#TestShape"/>
</g>
<rect x="500" y="10" width="100" height="150" fill="blue"/>
<foreignObject x="0" y="0" width="200" height="250">
<div xmlns="http://www.w3.org/1999/xhtml">
<embed id="wert" src="TestModule-Basic.svg" type="image/svg+xml" />
</div>
</foreignObject>
</svg>
The aim is to embed another svg image which supports the internal script (so this can't be done as an image) so I am using foreignObject
When run the above code displays the test shape and the rectangle, but it does not display the svg image in the foreignObject.
By experimenting I discovered that if I remove the xmlns="http://www.w3.org/2000/svg" from the main SVG node, the svg image in the foreignObject is displayed but the test shape and rectangle are not displayed. I also see the text within the script tag as part of the image.
I obviously need to include the svg namespace but I am not sure how I get both to display?
All help appreciated!

Related

Why this SVG not working in the EPUB file

I have the bellow pandoc generated xhtml in my EBUP file:
cat EPUB/text/ch001.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<title>ch001.xhtml</title>
<link rel="stylesheet" type="text/css" href="../styles/stylesheet1.css" />
</head>
<body epub:type="bodymatter">
<section id="valami" class="level1 unnumbered">
<h1 class="unnumbered">valami</h1>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="50"> </circle>
</svg>
<svg class="svg-preview" height="13" id="m_s2tex_0" style="--latex_align: -0.31706pt; --latex_height: 13px; vertical-align:-0.31706pt; opacity: 1" viewbox="1872.019782 1482.72797 4.782067 7.770859" width="8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs> <path d="m3.207272-6.981816c0-.261818 0-.283636-.250909-.283636c-.676363 .698182-1.636363 .698182-1.985454 .698182v.338182c.218182 0 .861818 0 1.429091-.283636v5.650908c0 .392727-.032727 .523636-1.014545 .523636h-.349091v.338182c.381818-.032727 1.330909-.032727 1.767272-.032727s1.385454 0 1.767272 .032727v-.338182h-.349091c-.981818 0-1.014545-.12-1.014545-.523636v-6.119998z" id="s7g0-49"> </path> </defs> <g id="s7page1"> <!--start 1872.019782 1490.246126 --> <use x="1872.019782" xlink:href="#s7g0-49" y="1490.246126"> </use> </g>
<script type="text/ecmascript">
if(window.parent.postMessage)window.parent.postMessage("0.31706|6|9.75|"+window.location,"*");
</script>
</svg>
</body>
</html>
</section>
</body>
</html>
It is basically 2 simple SVG object. The first one is a hand written just for the test and it is working:
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="50"> </circle>
</svg>
The second is automatically generated and it is not working.
<svg class="svg-preview" height="13" id="m_s2tex_0" style="--latex_align: -0.31706pt; --latex_height: 13px; vertical-align:-0.31706pt; opacity: 1" viewbox="1872.019782 1482.72797 4.782067 7.770859" width="8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs> <path d="m3.207272-6.981816c0-.261818 0-.283636-.250909-.283636c-.676363 .698182-1.636363 .698182-1.985454 .698182v.338182c.218182 0 .861818 0 1.429091-.283636v5.650908c0 .392727-.032727 .523636-1.014545 .523636h-.349091v.338182c.381818-.032727 1.330909-.032727 1.767272-.032727s1.385454 0 1.767272 .032727v-.338182h-.349091c-.981818 0-1.014545-.12-1.014545-.523636v-6.119998z" id="s7g0-49"> </path> </defs> <g id="s7page1"> <!--start 1872.019782 1490.246126 --> <use x="1872.019782" xlink:href="#s7g0-49" y="1490.246126"> </use> </g>
<script type="text/ecmascript">
if(window.parent.postMessage)window.parent.postMessage("0.31706|6|9.75|"+window.location,"*");
</script>
</svg>
I have tried to simplified down the second one to see why is not working, but without luck. Anybody have an idea what could be the reason?
update1: The file can be opened in Safari and it is rendering both SVG image correctly. I have uploaded a screenshot here. The first SVG is the quarter circle, the second one is the number 1.
You've written the viewBox attribute as viewbox.
SVG and XHTML are case sensitive languages whereas HTML is not so if the EPUB importer is expecting XHTML then this will be a problem.
Most epub viewers that I'm familiar with use a web engine for rendering. So to get your SVG to be visible in an epub, it probably needs to be visible in a web browser.
Trying your second SVG, I don't see anything in Chrome or Firefox. Or in a generic image viewer.
If I add a stroke= value to your path, I see "something" in the browser, but it's a tiny little thing. As if the viewbox and/or the use settings are confusing the browser.

How to pass paremeters with xlink:href in SVG format?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="70.4094in" height="34.0787in"
viewBox="0 0 20000 10000" xml:space="preserve" color-interpolation-filters="sRGB" class="st238">
<defs>
<g id="text1">
<title> </title>
<v:textRect cx="0" cy="0" width="19.2" height="0"/>
<text x="0" y="0"> text to display </text>
</g>
</defs>
<g>
<use x="100" y="100" xlink:href="#text1"/>
<use x="200" y="200" xlink:href="#text1"/>
</g>
</svg>
In my code I'm using the same object twice with use and xlink, do you know how I could pass parameters with the xlink (for example the param for the text instead to display "text to display" ) ?

Adding title element to paperjs SVG (using node.js)

I would like to add a <title> element to an SVG file generate with paper.js and its exportSVG function, within a node.js application (using paperjs-jsdom package)
So far, my files look like this :
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="642" height="377" viewBox="0,0,642,377">
<g>
...
</g></svg>
And I would like it to look like this :
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="642" height="377" viewBox="0,0,642,377">
<title>toto</title>
<g>
...
</g></svg>
I have looked into jsdom (which should be included in the paperjs-jsdom package), trying to load <svg> content in a DOM, but I have not been able to make it work.
If your concern is just adding a <title> tag after the <svg> tag, a workaround without even using JSDOM could be to use a RegExp.
Here is a sketch demonstrating the solution.
// Draw a circle.
new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'orange'
})
// Export Paper.js project as SVG string.
var svg = project.exportSVG({asString:true});
// Add title after <svg> tag.
svg = svg.replace(/(^<svg[^>]+>)/, '$1<title>My Title</title>');
// Show result in console.
console.log(svg);
Result is:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1151" height="937" viewBox="0,0,1151,937">
<title>My Title</title>
<g fill="#ffa500" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<path d="M525.5,468.5c0,-27.61424 22.38576,-50 50,-50c27.61424,0 50,22.38576 50,50c0,27.61424 -22.38576,50 -50,50c-27.61424,0 -50,-22.38576 -50,-50z"/>
</g>
</svg>

SVG inside Mozilla/XUL app: title/tooltip is not displayed

I wrote a xul application where a SVG fragment is embedded in a XUL element.
(...)
<scrollbox style='overflow:auto;' flex="1" pack="center">
<svg:svg version="1.1" baseProfile="full" width="100" height="100" id="drawingArea">
<svg:rect width="100" height="100" style="fill:red;" title="hello"/>
</svg:svg>
</scrollbox>
(...)
The image is displayed but the tooltip 'Hello' is not displayed on mouseover.
With the standalone svg file:
<?xml version="1.0"?>
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="10" height="2000" id="drawingArea">
<svg:rect width="100" height="100" style="fill:red;" title="xxx"/>
</svg:svg>
the tooltip is displayed in firefox.
Is there a way to show those tooltips in xul ?
Thanks.

How to change the color of an embeded SVG image

I have an SVG image element in my code.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="svg_social-link" x="20" y="20" width="17" height="17" xlink:href="mail-dark.png" />
</svg>
The image mail-dark.png is "Black" in color now.
I need to change its color. For example say to "green".I have tried using css as
<style>
#svg_social-link {
fill: green;
}
</style>
But its not worked. Is there any way to do this.
AFAIK, You can not change the background color in a SVG image, you could do it if the image is the HTML code (out of SVG).
However you could do it in SVG with a workaround, using a rect as background:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="20" y="20" width="17" height="17" id="bk_rect" style="fill:#800000;"/>
<image id="svg_social-link" x="20" y="20" width="17" height="17" xlink:href="mail-dark.png" />
</svg>
You can set the bk color inline or modify it using JS or CSS
$('#bk_rect').css('fill', '#aaaaaa');
I created JSFiddle: http://fiddle.jshell.net/7dcnZ/1/ To show it

Resources