Image in png/base64 in svg not displaying in Safari - javascript
I embedded an image in svg and tried to plot it in Safari. While it works fine in Firefox, the image doesn't display in Safari. The code is simple and displayed below.
Now the weird thing is that when I put this code in an online test site (http://www.rapidtables.com/web/tools/svg-viewer-editor.htm), it works fine in Safari... But wherever i put the code in my web page, it doesn't work... ???
Probably a bad interaction with rest of the page, couldn't figure out where.
If someone has a suggestion, it is highly welcome.
By the way, I am trying to use Blockly for a project and this image is generated and included in the Blockly SVG. I almost succeeded to include an editor in a Blockly bloc.
Damir
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="250px" height="50px">
<image width="200px" height="40px" xlink:href="data:image/png;base64,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">
</image>
</svg>
It doesn't work in Chrome either.
The problem is that your base64 encoding is awry. Delete the two equals signs at the end of the data URI:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="250px"
height="50px">
<image width="200px" height="40px" xlink:href="data:image/png;base64,iVBORw0KG
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">
</image>
</svg>
Related
Mozilla Firefox: SVG image is not working in dialog using 6.2 environement
I've create a Image component which will allow to drag and drop only svg images, so far its working fine but the problem is, some svg images are not supported in Mozilla browser but the same is working fine in Chrome browser. While drag and drop the svg image in dialog, the changes will happen but svg image is not visible in dialog once dialog submitted, i can see the image in browser but i want to know why some svg images are visible in dialog. Please suggest what is the solution for this? SVG CODE: <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 230.3 192.2" style="enable-background:new 0 0 230.3 192.2;" xml:space="preserve"> <path d="M104.5,107.9c0,5-4,9-9,9s-9-4-9-9s4-9,9-9h0.1C100.5,98.9,104.5,102.9,104.5,107.9z M136.4,98.9L136.4,98.9c-5,0-9,4-9,9 s4.1,9,9,9s9-4,9-9S141.4,98.9,136.4,98.9z M136.4,140.1L136.4,140.1c-5,0-9,4-9,9s4.1,9,9,9s9-4,9-9S141.4,140.1,136.4,140.1z M95.5,140.1L95.5,140.1c-5,0-9,4-9,9s4.1,9,9,9s9-4,9-9S100.5,140.1,95.5,140.1z M229.3,86.5c0,13.1-10.7,23.7-23.7,23.7h-14.3 v55.6c0,14.6-11.8,26.4-26.4,26.4H67c-14.6,0-26.4-11.8-26.4-26.4v-55.6H26.3c-13.1,0-23.7-10.6-23.7-23.7c0-18.3,5-34.2,15-47.2 C25.7,28.6,37.1,20,51.5,13.9C73.6,4.3,98.4,2.3,115.3,2.3c13.8,0,40.6,1.5,64.4,11.7c14.5,6.2,26,14.7,34.3,25.4 C224.2,52.4,229.3,68.2,229.3,86.5z M175.3,165.8v-55.7c-12.3-0.8-22-10.6-22-22.5c0-8.3-2.4-11.3-4.7-13.1 c-3.9-3.1-12.8-6.8-33.2-6.8c-9,0-25.1,0.9-32.2,6.8c-2.2,1.8-4.4,4.8-4.4,13c0,11.9-9.7,21.7-22,22.5v55.7 c0,5.7,4.7,10.4,10.4,10.4h97.8C170.6,176.2,175.3,171.5,175.3,165.8z M213.3,86.5c0-63.1-73.7-68.2-98.1-68.2 c-24.4,0-96.7,4.6-96.7,68.1c0,4.3,3.5,7.7,7.7,7.7H55c3.8,0,7.7-2.7,7.7-6.6c0-19.6,9.4-35.9,52.6-35.9c43.2,0,53.9,15.4,53.9,35.9 c0,3.8,3.9,6.6,7.7,6.6h28.7C209.8,94.2,213.3,90.8,213.3,86.5z"/> </svg>
SVG text line height displays differently within img tag
I have created an SVG image which I am using within our website. The SVG is displayed by inserting the XML into the HTML file, however, when loaded like this the SVG displayed differently compared with being displayed within an img tag. <img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" /> I am just trying to reduce the line height within the following SVG: https://jsfiddle.net/fahc2vvq/ I have to load in the XML version to edit the SVG within the website, Any ideas?
If you want a <foreignObject> to function correctly, you need to include a <body> element. Note: I've removed the image from this demo to make it smaller. <img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="73mm" height="150mm" viewBox="0 0 73 150" version="1.1" id="svg4523"> <g id="layer1" transform="translate(0,-147)"> <foreignObject x="15" y="150" width="40" height="60"> <body> <p id="credit-card-text" style="font-size: 4px;text-align:center;text-anchor:middle;fill-opacity:1;font-weight:bold;line-height: 1;">Customise with your own message here.</p> </body> </foreignObject> </g> </svg>
Generated SVG image doesn't display
I'm developing a JavaScript class to show all SVG objects, but when I create the element "image", the browser doesn't display it. Though if I copy the generated code and put it in another document, the image is displayed. When I searched the image using Firebug's inspector, the object appears but the image is not displayed. I created the object using appendChild(), setAttribute() and setAttributeNS() This is the generated code: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" > <image width="50" height="50" xlink:href="logo.png" y="20" x="20" id="d"></image> </svg> What I am doing wrong?
The problem were the namespaces. This is the correct form to create images dynamically:
image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'flower.png');
More imformation can be found on MDN's 'Namespaces Crash Course'.
How do I make a responsive image map where the image AND hotspots automatically resize with window?
First off, I apologize if this question is worded weird and off, I'm trying to put in code and make my questioning better since my last questions were erased. I just need to get help with this coding.
I have tried several jquery/javascripts on the image map and none have worked. The ones I've tried are at:
view-source:http://home.comcast.net/~urbanjost/IMG/resizeimg.html
https://github.com/stowball/jQuery-rwdImageMaps
My code for image map:
<img src="images/background.jpg" usemap="#banner" />
<map name="banner">
<area shape="rect" coords="109,7,435,324"
href="http://www.instituteforcreativelearners.org/" target="_blank" alt="The Institute
for Creative Learners">
<area shape="rect" coords="976,98,1295,278" href="http://www.adoptioncovenant.org/"
target="_blank" alt="Adoption Covenant">
</map>
I have also tried saving the image as a SVG file and it still doesn't resize the links/hotspots along with the image. (This is the straight svg code but I did add the links to the rectangles when I tried it)
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;"
xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" viewBox="0 0 2020 600" style="enable-background:new 0 0 2020 600;"
xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
</style>
<image style="overflow:visible;" width="2021" height="601" xlink:href="background.jpg"
transform="matrix(1 0 0 1 0.5 -0.5)">
</image>
<rect x="143.3" y="0" class="st0" width="468" height="454.8"/>
<rect x="1310.4" y="127.7" class="st0" width="468" height="249"/>
</svg>
Is there anyone that can help me?
I've not attempted this before, but a possible solution may be to use jQuery/JS to determine the window width, and update the image and map based on that.
First approach would be to set separate widths based on devices. The second approach would be a dynamic one using window.resize so that the values update dynamically based on the window width.
So first approach would look something like...
$(window).resize(function(){
if($(window).width()>=640){
//set your html for this screen width
}
else if($(window).width()>=320){
//set your html for this screen width
}
});
And the second approach would be something like
$(window).resize(function(){
var x, y, imgMap;
x = $(window).width() - 200;//update coords...
imgMap = "<html for img map here>";
}
});
Hope this helps a bit...
Here's info on resize
Better SVG rotated text rendering
I would like to know if there is a way to get a better rendering of svg rotated text? <?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" width="900" height="400" xmlns="http://www.w3.org/2000/svg"> <text x="50" y="50" id="text_0" transform="rotate(17, 50, 50)"> SVG text test </text> </svg> You can test the render of this code here: http://jsfiddle.net/vbzTd/2/ It seems like characters are not following the baseline and I don't understand why. Thanks a lot for your help.
I had similar problem. When the text is rotated all the letters twitching. And it happens in all browsers. Fortunately, I had not so many text for rotating and I just converted text to path. After that it works perfectly. But if you have to rotate a lot of text - size of svg will increase dramatically.