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.
Related
I'm using material designe icon in an svg format.
When I try to display the icon in my html I get the error:
"icon mdsize: A not found".
I saved all the icons in an svg file with all the paths.
My config.js file:
app.config(function($mdIconProvider){
$mdIconProvider.iconSet('mdsize', 'fileSrc', 24);
});
My svg file:
<g id="A">
<path d="iconPath" fill="none"/>
<path d="anotherPath"/>
</g>
My html:
<md-icon md-svg-icon="mdsize:A"></md-icon>
The md-icon tag is inside an md-list-item that is generated by ng-repeat.
Important to mention: There is another md-icon that is saved in the same svg file inside the md-list-item and it is shown on the html page. The way of presenting them is iddenticle so I don't see why the other icon won't show.
I don't know much about svg but I've had a play and this works without errors.
fileSrc.txt
<svg width="100" height="100">
<g id="A">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</g>
</svg>
test.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script>
angular.module("elcomaApp", ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.config(function($mdIconProvider){
$mdIconProvider.iconSet('mdsize', 'fileSrc.txt', 204);
})
.controller("MainController", function() {
});
</script>
</head>
<body ng-app="elcomaApp" ng-controller="MainController" ng-cloak>
<md-icon md-svg-icon="mdsize:A"></md-icon>
</body>
</html>
If I replace the content of fileSrc.txt with the following I also don't see any errors:
<svg width="100" height="100">
<g id="A">
<path d="iconPath" fill="none"/>
<path d="anotherPath"/>
</g>
</svg>
Note: These files work with Firefox but Chrome shows a "Cross origin" error.
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!
So the devil is in the details in this question.
I want to create some svg components with encapsulated behaviour (and therefore I want to include a script tag inside the external svg file(s)). Now, this works fine from HTML5 when you include via object or embed, etc. But I want to reference these svg files from within an svg tag (inside an svg element).
So, from within svg, the only ways I know of to include an svg file (via xlink:href) is with either an image tag or a use tag. Neither, however, will accept a script tag in their content model, which I assume is why the script tags are not being interpreted (and I'm pretty sure they are not being interpreted). I am escaping the scripts in CData format inside the svgs, so I don't think it is a parsing problem.
Here is a brief example of what I mean.
The Html File:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div id"top">
<svg id="map" viewBox = "0 0 500 500" version = "1.1" width="250" height="250"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="110" width="100" height="100" xlink:href="svg/obj/example.svg" />
</svg>
</div>
</body>
</html>
And svg/obj/example.svg:
<?xml version="1.0" encoding="iso-8859-1"?>
<svg viewBox = "0 0 500 500" version = "1.1" width="250" height="250"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="application/ecmascript"> <![CDATA[
function circle_click(evt) {
var circle = evt.target;
var currentRadius = circle.getAttribute("r");
if (currentRadius == 100)
circle.setAttribute("r", currentRadius*2);
else
circle.setAttribute("r", currentRadius*0.5);
}
]]> </script>
<circle cx="200" cy="200" r="100" fill="yellow" stroke="black" stroke-width="3" onclick="circle_click(evt)" onactivate="circle_click(evt)" mouseover="circle_click()"/>
</svg>
To eliminate the likelihood of parsing errors, I cut and paste the above script from a W3C example (iir). I've tried many variations on this theme, but can't seem to get it working. The specifics are sufficiently conflated that searching just brings up different use cases. Hopefully someone here can take me out of my misery ;).
Is anyone able to offer an explanation of the change in relative size of the rect and text when adding attributes (width, height, viewBox) to the SVG element? (tested in Firefox 30 on Linux x86_64)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<script src="jquery.js"></script>
<script src="d3.js"></script>
</head>
<body>
<svg>
<g transform="translate(10, 10)">
<rect fill="yellow" height="7.45em" width="29.4em"></rect>
<text stroke="black">
<tspan dy="1.69em" x="2.65em">PNUUUUUUUUU</tspan>
<tspan dy="1.69em" x="2.65em">TEST TEST TEST TEST TEST</tspan>
<tspan dy="1.69em" x="2.65em">EEE</tspan>
<tspan dy="1.69em" x="2.65em">QQQ</tspan>
</text>
</g>
</svg>
</body>
</html>
shows as desired:
changing the svg element to
<svg width="400px" height="300px">
or
<svg width="400px" height="300px" viewBox="0 0 400 300">
gives this result:
See: http://www.impressivewebs.com/understanding-em-units-css/
If you do not set font-size anywhere in your document (css or html file), then "em" will be relative to the size of font used by the web browser.
In google chrome, this is in settings under: web content -> font-size.
I have an HTML page with a <base> tag, also containing SVG. Same-document references such as the below within the SVG then fail:
<html>
<head>
<base href="http://my/server/basedir">
</head>
<body>
<svg>
<g>
<path d="M100,100 L150,150" id="path"/>
<text>
<textpath xlink:href="#path"/>
</text>
</g>
</svg>
</body>
</html>
The xlink:href="#path" reference fails to resolve. This works fine without the HTML base element. It also works if I replace the href attribute on the textpath element with an absolute IRI followed by the fragment identifier.
It seems to me that SVG should treat same-document IRI's differently and independent of the HTML base. In http://www.w3.org/TR/xmlbase/#same-document it says "Dereferencing of same-document references is handled specially.", although granted that's in the context of xml:base. By the way, I played with putting an xml:base on the svg element in hopes of overriding the HTML base setting for couldn't figure out how to make that work.
Case 1: without xml:base
Works in IE(Edge),Chrome, but not Firefox.
<html>
<head>
<base href="http://my/server/basedir">
</head>
<body>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M100,100 L150,150" id="path"/>
<text>
<textpath xlink:href="#path">Hello</textpath>
</text>
</g>
</svg>
</body>
</html>
Case 2: with xml:base
Works in IE(Edge),Chrome, Firefox.
If this page url is http://my/thisfile.htm then set xml:base="http://my/thisfile.htm" on the svg tag or textpath tag.
<html>
<head>
<base href="http://my/server/basedir">
</head>
<body>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:base="http://my/thisfile.htm">
<g>
<path d="M100,100 L150,150" id="path"/>
<text>
<textpath xlink:href="#path">Hello</textpath>
</text>
</g>
</svg>
</body>
</html>