I'm wondering if it matters when you save an image in a folder, like when you right click on an image, Do you choose:"Save link as" or "save image as" as I have tried both but for some reason I cannot display the image as my background for a website. Is there anything wrong with the code that I did? Every time I drag the URL into a new tab or browser I only get 6 bullet points on a blank page.
I mainly used an external CSS sheet, then decided to try to fix it by using an internal sheet on HTML, and since that did not work, instead I tried to implement it in the body tag rather than the header tag but nothing worked. Would I have to use the tag? But how else will I be able to implement a background?
file:///Users/kevinnguyen/Desktop/Screen%20Shot%202019-01-26%20at%2011.09.11%20PM.png
The one above is the HTML file.
file:///Users/kevinnguyen/Desktop/Screen%20Shot%202019-01-26%20at%2011.12.19%20PM.png
this is the external file of CSS.
I'm a new to programming as I self taught myself the basics, yet I want to learn so much of it, it's thrilling.
Your links to the images don't work because they point to files on your computer. You need to upload them somewhere and put the link here to be able to see them. Anyway, if you have background-image:url("6928140-swiss-alps.jpg") your image should be in the same folder as the css file. And it should be called 6928140-swiss-alps with the .jpg extension at the end.
I am working with the very good mxgraph library. I base my application on the GraphEditor example.
I have used my own PNG icons. Everything works well. For a better rendering I want to use SVG images. I have tried to remplace PNG image by SVG image, it's working well in the javascript : I can drag and drop, then resize ... I can save and open correctly.
But if I try to export in PNG or PDF, the SVG images or not exported (the rest of the diagram is OK).
I tested SVG images on draw.io and it is correctly exported.
Is there any option or parameter to fix that ?
I looked to another request : SVG shapes instead of stencils
The solution might be with mxImage but I can't find how to use it.
Any help welcome.
enter link description hereAs you can see in the attached images, the materials, doesn't repeat in all the area but only in a partial part (upper left). Any suggestion is very appreciated.
I'm using three js editor r.85
Image of the rendered file in threejs editor.
Image of the rendered file open by normal html file.
Json file used (updated 05/28/2017)
Image (512x512)
On every page of my site, I have included to code for an SVG that contains a bunch of icons that I use throughout the site, and when needed I call <svg><use xlink:href="#svg-icon" /></svg> to display it. Everything works great on that front, but once I reach a page that has a URL containing a variable (ex: index.php?page=1), suddenly none of the SVGs work anymore.
Possible that parameter triggering some changes in HTML code with errors.
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..