I had an HTML Object tag like this:
<object class="someclass" id="someid" type="image/svg+xml" data="/relative/path/to/svg/file.svg">Your browser does not support SVG files, and so your visualization cannot dislpay</object>
This displayed my SVG image file fine. However, I wanted to move the SVG image file outside of the website root, so that users that do not have an account cannot see the file. So the data attribute would become a link to an intermediate page, which would construct the path to the SVG image and show it to the browser.
Now I have:
<object class="someclass" id="someid" type="image/svg+xml" data="/some/intermediate/page?image=/parameter/file.svg">Your browser does not support SVG files, and so your visualization cannot dislpay</object>
However, this does not display the image. When I use an Img tag instead, it does display when I right click it and select 'view image'. I tried things such as urlencode the query part of the URL, urlencoding the entire string, replacing the question mark for %3F, switching between Object and Img tags, but it does not seem to work.
Thanks for the help!
The problem ended up being HTTP header information. SVG images have to be served as header('Content-type: image/svg+xml'), and not just as XML
Though the OP has solved his problem, I came across a similar error in which the object tag was unable to render the data. The error turned out to be due to the X-Frame-Options, which in some cases is by default set to DENY.
If this is the case, you need to set to the appropriate value to be able to render.
Related
I'm trying to use the background-image CSS property to set the background of some nodes in a cytoscape-graph.
If I use:
'background-image': 'url(https://cdn3.iconfinder.com/data/icons/computer-system-and-data/512/1-256.png)',
it works perfectly fine.
However, if I use this (the image I actually want to use):
'background-image': 'url(http://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png)'
the image does not load.
The difference between these two url's as far as I can see, is that the latter downloads the image instead of displaying it when I enter the image url in my browser.
Using the img-tag works with the latter URL when I'm in just plain HTML, so I'm not sure what's causing this URL not to be usable with the background-image CSS property:
<img src='http://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png'></img>
This image result is not found. I would recommend some icon hosting website like icons8.com if you would like to import custom icons in your project.
<img src='https://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png'></img>
So this seemed to be a CORS-error, and I managed to fix it by adding a proxy to my image url. I used https://cors-anywhere.herokuapp.com as my proxy.
So instead of fetching the image from
https://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png
I fetch the image from this instead:
https://cors-anywhere.herokuapp.com/https://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png
I'm trying to embed an "clickable" image (Html code with links and shapes in it) to a new style sharepoint site. As the new one doesn't feature the option to edit the source code I tried to embed it via an iframe and the embed webpart. I managed to get some html code in the iframe via the srcdoc attribute but it isn't showing my image. The image is on the Sharepoint and the link also correct.
The Code:
<iframe srcdoc="<img src=https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/SC%20EMEA%20CoE%20Stamp%20SLENDER%20neg.png" width="400" height="400" "="" src="https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/Weltkarte%20fertig.jpg?csf=1&web=1&e=v7OI07"></iframe>
The scr attribute is for the Sharepoint, because without it it doesn't accept the code.
Is it just not possible or did I something wrong?
What is stopping you from using the Image Web part?
Cheers
Truez
I know it has almost been 2 years but just in-case you still need the solution here it is:
The Solution:
Your img syntax is incorrect, you do not have a closing ">". Here is the proper syntax:
<iframe srcdoc="
<img src='https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/SC%20EMEA%20CoE%20Stamp%20SLENDER%20neg.png' width='400' height='400'/>" src="https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/Weltkarte%20fertig.jpg?csf=1&web=1&e=v7OI07" width="iframe width here" height="iframe height here"></iframe>
Don't forget to include an iframe height and width as SharePoint requires it. Also remember when embedding any html code that requires ", you need to change it to ' instead as it will break the code.
I have a grid of images on my website, but some of the images randomly don't work. All the image sources are links, which are all generated from the same place. I'll show an example, with an image that works and one that doesn't:
http://codepen.io/anon/pen/mJmaZE
As you can see the second image doesn't work, but if you visit the source link the image is there. Why is this happening?
The second image is missing the http:// part. That means, the browser doesn't know it should look at a different server, but tries to access it at the same server, where the HTML file is hosted.
the content of the src attribute is lacking the prefix http:// . when addint it, it displays the image correctly. otherwise, it interprets the URL as a relative URL in the context of the embedding web page.
The syntax of source URL is wrong.
Current syntax
src="steamcommunity-a.akamaihd.net/xx"
This is a relative path which will point to http://codepen.io/anon/pen/mJmaZE/steamcommunity-a.akamaihd.net/xx
Correct syntax
src="http://steamcommunity-a.akamaihd.net/xx"
which will request the intended CDN url.
I am developing a web application which takes user inputs, does engineering calculations and then shows a formatted report or graphic. The graphics are engineering diagrams and not always standard graphs like Pie charts. The primary function of the application is to enable the user to copy these diagrams from the browser to a Word or Excel document.
I have to make a choice on using SVG generated in the client, or bitmaps generated on the server side. I prefer the SVG approach and the prototyping looks good, however, copying the SVG graph seems to be inconsistently supported across browsers, especially if the graph is shown in a div (i.e. the entire page is not .svg). For example, IE shows a "copy" on the dropdown, but copies only part of the SVG graphic to the clipboard. Chrome gives no copy option if I right click on the SVG graphic.
If I Google around, I am surprised to see how little information there is on the problem of getting an SVG image from a web application onto the clipboard.
My question for readers who have worked through this problem:
Is there a consistent way to get an SVG element that is part of a
larger DOM onto the clipboard, preferably using JavaScript;
Any other recommendations given my requirement of getting graphics
from browser onto clipboard?
Instead of displaying the svg as an svg element display it with the img tag. This has some limitations (you can't display custom fonts or embed scripts, but it seems this is not your use case). The upside is that is behaves exactly as you would expect from an image (you can drag and drop, right click and copy, etc).
To do this you need to encode it with base64. You can do it server side or client side with js. Your image tag ends up looking something like...
<img src="data:image/svg;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolf" width="..." height="..." alt="diagram" />
Where R0lGODlhEAAQAMQ... is your base64 encoded svg.
Javascript and the Clipboard is a pain in the a**.
There is one workaround for your situation that I know of:
If it is a true SVG file, in Chrome, right click on the image, and select "Inspect Element".
The browser console will open, and should open to an SVG element that you can select in the inspector.
Right click the svg tag in the inspector, and select 'Copy' or 'Copy as HTML' (I can't recall the choices exactly)
Paste that text into a text file and then save the file with an SVG extension. It can then be opened in any browser or SVG editing program. Inkscape is a good choice for editing and debugging, as you can view and edit the entire SVG file in an XML style editor.
**Sorry - I missed the first part of your request. That will be tricky. I'm afraid I can't help with that part. Copy and paste probably isn't your best option though. There are PHP classes to both manipulate SVG and Excel files, and that will likely be the way to go.
I managed to copy SVG content to clipboard as plain XML text, but it appeared useless for me, because Inkscape (which I use to work with SVG), doesn't recognize the text in clipboard as SVG. It appears that copying text of SVG is not enough and the browser should also set the mime-type to image/svg+xml.
I tried several tricks with HTML5 Clipboard API, but ended with the problem that Chrome is unable to export the mime-type into system clipboard. The relevant bug report and jsfiddle link for it is here https://code.google.com/p/chromium/issues/detail?id=504700
I faced the same problem in a project. The customer wanted to have a rather complicated chart. We decided to develop it using svg. Worked perfect, but the customer wanted to be able to download the graph as a picture. After a search on the internet, we found saveSvgAsPng (https://www.npmjs.com/package/save-svg-as-png). That did the trick for us.
The graph is in the page like this:
<svg id="graph1" style="width: 700px; height: 700px">
....
.....
...
</svg>
The graph is shown, but can't be downloaded or copied. So, here are the steps I took:
I installed the package mentioned above.
<script src="/path/to/lib/save-svg-as-png/lib/saveSvgAsPng.js"></script>
Added "display: none:" to the svg code, otherwise we will have two instances of the same image:
<svg id="graph1" style="width: 700px; height: 700px; display: none">
<!-- // code goes here -->
</svg>
Directly after the declaration of the svg graph, I added a new image. This image, is the placeholder for the new png image representation for the svg image. I hide it on first, to prevent the image from flickering while loading. The source is initially not specified:
<img id="graph1_as_png" src="" width="700" height="700" style="display: none">
After the newly added image, I added some lines of code, that to the conversion trick:
<script>
svgAsPngUri(document.getElementById("graph1")).then(uri => {
$("#graph1_as_png").attr('src', uri).show();
});
</script>
The source of the second image is filled up with a BASE64 encoded version of the svg. After the conversion, the image is shown. Now we have exactly the same image as our svg image, but with the possibility to download or to copy the image.
I hope this will help you as wel..
When I embed a set of SVG graphics elements inline into HTML I have access to e.g. a group, say a chesspiece, via its id-attribute and can make it clickable, draggable and so on. Very nice and straight forward.
Now I remove the SVG code from the HTML and put it into a separate file which I include via
<embed src=... />
into the HTML. This works with no apparent difference in the rendering, but now I don't have access to the group via its id-attribute any more. With
<object data=...></object>
it is the same, by the way.
What am I missing?
If you have your script in the html file, you want something like this...
document.getElementById("embed_or_object_id").getSVGDocument().getElementById("element_id");