I have main domain and sub domain. I added svg image in both domain.
Code Below
<svg width="245" height="52" xmlns="http://www.w3.org/2000/svg" class="img-fluid">
<image href="https://DOMAIN/images1/brandlogo.svg" height="52" width="245" alt=""></image>
</svg>
<svg width="245" height="52" xmlns="http://www.w3.org/2000/svg" class="img-fluid">
<image href="https://SUBDOMAIN/images1/brandlogo.svg" height="52" width="245" alt=""></image>
</svg>
For subdomain svg image is showing but in maindomain it not showing.
Please anyone help me.
Related
I am trying to place a PNG image directly into the SVG file (using Base64). Here is a demo:
https://jsfiddle.net/bL11Lp8d/
<use href="#img1" transform="matrix(20,10,-5,20,50,50)" />
It works fine in Chrome, but does not work in Firefox. Do you know what is the problem?
The image has no width and height attributes. Firefox still requires them.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500" height="500">
<defs>
<image id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" width="5" height="5" />
</defs>
<use href="#img1" transform="matrix(20,10,-5,20,50,50)" />
</svg>
SVG 1.1 says they are mandatory, The SVG 2 specification says optional.
I have two SVG files. I'm trying to xlink the contents of rect.svg into tst_use.svg. The contents of tst_use.svg are,
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xhtml="http://www.w3.org/1999/xhtml" version="1.1" id="svg_hom_img" width="508" height="438">
<use x="0" y="0" id="us_g1_0" width="508" height="438" xlink:href="rect.svg"/>
</svg>
and the contents of rect.svg are,
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xhtml="http://www.w3.org/1999/xhtml" version="1.1" id="svg_hom_img" width="508" height="438">
<rect x="0" y="1" width="250" height="250" id="BackDrop" pointer-events="all" style="opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2; stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"/>
</svg>
Of course, the two files are in the same directory. I have tried a number of combinations. The code works inline. rect.svg displays in the browser. I can also cobble the files together with javascript. Other people use this syntax. Why can't tst_use.svg xlink to rect.svg?
Using Robert Longson's comment, I changed test_use.svg to,
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xhtml="http://www.w3.org/1999/xhtml" version="1.0" id="svg_hom_img" width="508" height="438">
<use x="0" y="0" id="us_g1_0" width="508" height="438" xlink:href="rect.svg#BackDrop"/>
</svg>
with the same rect.svg as in the question. That displayed the rectangle in Firefox, but not in Chrome. It seems that javascript is the best solution.
I understand that all vector drawings (even others) are made of codes. I was wondering if its possible to check the code of the same. For instance, if I have a rectangle in .svg or .eps format, how do I check the code that makes this rectangle ?
Try opening it in a text editor?
For instance, this image should look like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100">
<title>SVG Logo</title>
<a xlink:href="http://www.w3.org/Graphics/SVG/" target="_parent"
xlink:title="W3C SVG Working Group home page">
<rect
id="background"
fill="#FF9900"
width="100"
height="100"
rx="4"
ry="4"/>
...
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.)
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.