I have spent a few days on the following with no joy.
I wish to render Mathjax in an SVG file. I have no problem including it in a html file in an svg element using a foreignObject from the examples at https://groups.google.com/forum/#!topic/mathjax-users/_UMt3C7TIpQ/discussion, but I cannot get it to work in an svg file.
The code I am trying is as follows :-
<svg width="1960" height="1080" xmlns="http://www.w3.org/2000/svg">
<script type="text/javascript" src="MathJax-master/MathJax.js?config=TeX-AMS_HTML-SVG"></script>
<g>
<title>Layer 1</title>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="50" id="svg_1" y="223" x="636" stroke-opacity="0.8" stroke-width="0" stroke="#007FFF" fill="#000000">Hello World</text>
<foreignObject x="100" y="100" width="100" height="100">
<body xmlns="http://www.w3.org/2000/svg">
<div>
\(\displaystyle{x+1\over y-1}\)
</div>
</body>
</foreignObject>
</g>
</svg>
Any help would be much appreciated. I do suspect the problem is with the line declaring the body element.
A <div> tag is html so the <body> tag should be in the html namespace xmlns="http://www.w3.org/1999/xhtml" rather than the svg namespace.
Your other mistake is that you're using html syntax for the script tag. SVG script tags use xlink:href instead of a src attribute. Fixing that gets us here:
<svg width="1960" height="1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<g>
<title>Layer 1</title>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="50" id="svg_1" y="223" x="636" stroke-opacity="0.8" stroke-width="0"
stroke="#007FFF" fill="#000000">Hello World</text>
<foreignObject x="100" y="100" width="100" height="100">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
\(\displaystyle{x+1\over y-1}\)
</div>
</body>
</foreignObject>
</g>
</svg>
But when we do that we run into a bug in the mathjax library. It seems it expects to find html nodes in the document (check the Firefox Error Console). You'd have to contact the mathjax developers and get them to fix their bug to progress further.
Related
I have an SVG file and I'd like the text to be editable. Following advice on stackoverflow, I'm using <foreignObject> to acheive this. (Code example below.)
It works a treat in the Chromium browsers, Chrome and Edge.
It doesn't work in IE, but then it doesn't support <foreignObject>, so no surprise.
It also doesn't work in Firefox and I can't figure out why.
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<style>
#text2edit {
font-family: Helvetica, Arial, sans-serif;
font-size:24px;
}
</style>
<path id="screen" d="M0 0h300v100H0z" fill="#00f"/>
<foreignObject x="10" y="10" width="280" height="50">
<div xmlns="http://www.w3.org/1999/xhtml" contenteditable="true" id="text2edit"
style="color: #d4defb; background-color:#000;text-align: center;">Click to edit</div>
</foreignObject>
<text width="300" height="25" x="0" y="60" fill="#fff">
You can click to edit (and click outside
</text>
<text width="325" height="25" x="0" y="85" fill="#fff">
the box when done). Chrome only :-(
</text>
</svg>
Ultimately I want this in an SVG file that's included in an HTML file (using <object>). To emulate this, I've saved the code above in an SVG file and look at it on my own machine via a localhost URL.
Curiously if I put it in a codepen (paste the SVG above as HTML), it works fine in Firefox. But then that's really because the SVG is in-lined into HTML, which I'm trying to avoid.
Is there a trick to get Firefox working. And is there a trick to get IE working too?
The following attempt to make a rectangle with a pattern fill doesn't seem to work in Safari 6.1, Firefox 30, or Chrome 36, even though the W3 spec seems to say that a I can use a non-local IRI reference, including a relative one, like fill="url(localURL.svg#MyId)".
test.html
<html>
<head>
<style>
.patterned { fill: url("patterns.svg#polkadot");
stroke: lime; stroke-width: 5px}
</style>
</head>
<body>
<svg width="500" height="500">
<rect class="patterned" height="27" width="58">
</svg>
</body>
</html>
patterns.svg
<svg xml:space="preserve" width="225" height="110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="polkadot" patternunits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<circle r="10" cx=12 cy=10 fill="purple">
</pattern>
</defs>
</svg>
Safari and Chrome show a black-filled green-outlined rectangle. Firefox shows an empty or white-filled green-outlined rectangle. None of them show the pattern of purple circles.
I'm trying this approach because I couldn't get an SVG fill pattern to work on Safari in the Backbone+JQuery+D3 project I'm working on using the most common method, an inline defs with fill="url(#MyId)". I couldn't get that approach to fail as a simple test case -- I thought I had, but that turned out to be a different Safari bug with an obvious workaround. At least that approach worked in some browsers.
You've a load of syntax errors in your patterns.svg file. Missing " characters round attribute values, an unclosed circle element, patternunits instead of patternUnits.
SVG standalone must be valid XML, it's not as forgiving as html and it's case sensitive on attribute names too. If you loaded the patterns.svg file directly, browsers would tell you all these things.
With all this fixed (as below) this works in Firefox. I'm not sure Chrome/Webkit have implemented this yet.
<svg xml:space="preserve" width="225" height="110" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="polkadot" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<circle r="10" cx="12" cy="10" fill="purple"/>
</pattern>
</defs>
</svg>
I have an html page with two svg use elements:
The first references inline svg.
The second references an external svg file (same code).
I am trying to figure out why the second example does not show the svg paths even though the SVG code that is inline is exactly the same as the SVG code in the linked file.
https://s3.amazonaws.com/jagger/svg/index.html
<svg class="svg-inline">
<use xlink:href="#test" />
</svg>
<svg class="svg-external">
<use xlink:href="sprite.svg#test" />
</svg>
<svg width="0" height="0">
<symbol id="test" viewBox="0 0 600 600">
<title>Test Icon</title>
<rect id="svg_2" height="214.39594" width="481.62782" y="10" x="10" stroke-width="5" stroke="#000000" fill="none"/>
<line fill="none" stroke="#000000" stroke-width="5" x1="10" y1="10" x2="400" y2="400" id="svg_1"/>
</symbol>
</svg>
using of external sprite is working in the latest version of all modern browsers
still problem in actual IE and older browsers versions
see MDN <use> browser_compatibility table
for IE (and older browsers) just use polyfill svg4everybody
Suppose I have an SVG which has the following defs:
<svg width="179" height="170" viewBox="0 0 179 170" xmlns="http://www.w3.org/2000/svg">
<title>Star 1</title>
<defs>
<g id="shape">
<rect x="50" y="50" width="50" height="50" />
</g>
</defs>
<g fill="none" fill-rule="evenodd">
<path stroke="#979797" fill="#D8D8D8" d="M89.5 140.25l-54.958 28.893 10.496-61.196L.576 64.607l61.445-8.93L89.5 0l27.48 55.678 61.444 8.93-44.462 43.34 10.496 61.195z" />
</g>
</svg>
I am including that SVG inside an HTML document using the object tag. For example:
<object type="image/svg+xml" data="star.svg" class="svgObjectWrapper">
Your browser doesn't support SVG
</object>
Is there any way, in the HTML document, to reference/use those defs from the SVG (which is in turn inside the object). For example, this doesn't seem to work. Should this be possible?
<use xlink:href="#shape" x="50" y="50" />
My guess is no, but I wanted to be sure.
It's possible on UAs that support it (Firefox does for instance) and you don't even need an object tag if all you want is to reference a document via <use>.
Per the SVG specification you can just put in the URL of the file you want to use the data from i.e.
<use xlink:href="star.svg#shape" x="50" y="50" />
star.svg has to be on the same domain as your html file.
Since <object> loads the svg in a separate document you can't use local references (such as <use xlink:href="#shape"/>) in the top document to reach resources inside the other document. It is possible to reference external resources with <use> though, e.g <use xlink:href="star.svg#shape"/>. Note that this still does not mean that it's the same document as that in the <object>, e.g if you change elements inside the <object> element it will have no effect on <use xlink:href="star.svg#shape"/>.
Safari browser (I'm testing under windows) seems having problem in displaying Svg Image element.
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<img src="image.svg" />
</body>
</html>
And here is the content of the image.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
<rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
<image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>
Is there any solution or workaround to make this work in Safari?
In the <image> tag inside the svg element, href works fine in Chrome. To work in older versions of Safari, you need xlink:href. (Also applies to the <use> tag.) Keep in mind xlink:href is deprecated and is being replaced by href. However, it was not supported until Safari 12.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ...>
<image href="data..." xlink:href="data...">
</svg>
I think there are two problems here:
You haven't said anything about how large your SVG image is. As a rule, you should at least include a viewBox attribute in the <svg> tag. For example:
<svg width="250" height="250" viewBox="0 0 250 250" ... >
The other problem is that Safari isn't particularly brilliant at rendering SVGs. However, it tends to do better when you embed them with an <iframe> or <object> tag instead of using <img>. For example:
<object data="image.svg" type="image/svg+xml"></object>
Also, make sure your server is delivering SVG content with the correct MIME type (Content-Type: image/svg+xml), as this can cause problems too.
So give this a try:
HTML source:
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<object data="image.svg" type="image/svg+xml"></object>
</body>
</html>
image.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="250" height="250" viewBox="0 0 250 250"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
<rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
<image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>
Be sure to supply your <svg> tag with a height, width, and view box like so. Safari doesn't like it when height or width is set to auto for some reason. ⤵︎
<svg height="16px" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M60......"></path></svg>
I just discovered this same problem when I checked an app I was working on in Safari, after having been using Chrome most of the time. I wrote this bit of TypeScript/jQuery code (easily enough turned into plain JavaScript) to solve the problem:
export function setSvgHref(elem: JQuery, href: string) {
elem.attr('href', href);
if (isSafari()) {
elem.each(function() {
this.setAttributeNS('http://www.w3.org/1999/xlink', 'href', href);
});
}
}
In my case, the problem was related to <mask> tags in svg.
I deleted the following line in my svg component and it started to work on Safari.
<mask id="y9iogdw0wd" fill="#fff">
<use xlink:href="#jz8vxv0q6c"/>
</mask>
I had a problem with a wordmark (text that I use as a logo) that I saved as a .svg file. It was on my page with a <img src="...svg"> but did not appear properly in Safari (current version as of July 2020). The SVG worked fine with FireFox, Chrome, and Brave.
I had created the SVG in Inkscape. I selected the entire object, then used Path -> Object to Path... and saved the resulting file.
This rendered properly in all four browsers. (I'm writing this here in case I have this problem again: it'll tell me what I did to fix it.)