I need to add an svg in the following format:
<svg class="xxx" width="x" height="x" viewBox="xx" fill="xx" xmlns="xxx">
<path fill-rule="xx" clip-rule="xx" d="192 1920192 1920129.210291090291 192012" fill="blue" />
</svg>
How do I get an svg file and get it into the format above? SVG code above is in a .cshtml file. I've tried dragging and dropping the SVG file into code but it turns into an image tag.
There are many ways to get a svg image in that format. You can use Illustrator, CorellDraw, but if you intend to use it for the web then the best option is to use Inkscape.
On how to add the svg code, if you want to add it to html code, there are many ways to do that. Any of which have pros and cons depending on what you want to do with the svg.
1-You can simply embed the code within the html file. Open the svg in Visual Studio and copy then paste into a div tag in the html code.
Like this:
2- You can use the img tag and call the svg file like any other image.
Like this:
3- You can use Object to call the svg file into html but I really never use this method and I don't know how to do it this way. But 1 min of Google search probably knows how to.
Related
I have an url that corresponds to an image.
The url looks like https://myImageUrl (there's no reference to the extension).
I want to show this image but i don't know if it's an svg or a jpg.
Is there a way to get the image's extension from its url? I've tried mime package https://pub.dev/packages/mime but it doesn't work.
I need to know the image's extension because:
if it's a svg I'll use SVG library
if it's a jpg I'll use Image.network('myImageUrl')
Is there a way to get the image's extension from its url
No. If it's not there, it's not there. There is no magic available that would show missing information.
Since you want to load it from assets if it's an svg (which seems weird, but okay), you could just check the given URL against all assets... if it's in their, show it from assets.
I am working on javascript project.
What I have done so far with d3.js is drawing a world map.
I reference the following page.(http://www.d3noob.org/2013/03/a-simple-d3js-map-explained.html)
All countries are drawn under svg tag.
What I would like to do is convert the image to png and download to local computer.
Researching in the Internet, it id doable.
I need to convert it to base64 datarurl and then convert it to png.
The first thing I have to do is select svg tag.
The following is my code
function downloadImg(){
var html = d3.select("svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;
window.alert(html);
...
...
}
For testing purpose, I print out "html".
What it give to me is the entire body.
I just need to have svg tag elements.
Can you tell me what I have done wrong?
Thank you.
Element.outerHTML is your friend here:
var html = d3.select("svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().outerHTML
I created lots of D3 chart in the application .
But right now my requirement is to save D3 chart in any format like png/gif or pdf.
I searched a lot and every one say we can use canvas for that.
Can anyone give any example or link for that...
Conceptually I am clear about that like
Use the canvg JavaScript library to render the SVG image using Canvas: https://github.com/gabelerner/canvg
Capture a data URI encoded as a JPG (or PNG) from the Canvas, according to these instructions: Capture HTML Canvas as gif/jpg/png/pdf?
What I want actually if any one have implemented, then could you please share the code.
After searching many resources and trying many things, I found SaveSvgAsPng
on GitHub.
It's very easy to implement and to use with resources available on README page on the same link.
Steps
Add Javascript library to your project.
Write a function with saveSvgAsPng call, include other options as required.
Example usage
saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png");
Example function using d3.js
// I have button in html with id="download"
d3.select("#download")
.on('click', function(){
// Get the d3js SVG element and save using saveSvgAsPng.js
saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png", {scale: 2, backgroundColor: "#FFFFFF"});
})
For this example, my plots are small for a web page so increased size to double for download and rather than transparent background as default I changed to white.
SaveSvgAsPng worked for me too. But if you want it to work in IE, you need to include "canvg" and pass it as parameter as below:
function saveAsImage(name, id) {
var svg = $('#'+id).find('svg')[0];
saveSvgAsPng(svg, name + '.png', { canvg: canvg, backgroundColor: 'white'});
}
"backgroundColor" parameter is also useful when your graphs need to be saved with a background.
I use a command line application to create QR images from a given input text. I create enough of these and do some image editing, namely:
resize the QR image,
place on an office document
type an index number next to the image
repeat the above steps by adding more QR images next and below this image
print an A4 page on the printer full of QR images.
The whole process is very repetitive and can be automated. But I don't know where to start from with this. I see gimp has "script-fu" based on the scripting "scheme" language but I can't find (or think of) some relevant function that can do the above. Sure the resize is easy, but adding text and creating a restricted image tile surface seems not as straight forward.
Is there some application that I could use that edits the image according to some script and places the result in an A4 image which will later be printed?
Or am I plainly asking for too much? If it integrates weel with bash / python scripts then that is even better!
thank you
IMO this will require some work; one way to accomplish this is doing the following:
Create a svg template file with A4 size, layout it in a way that fits a page with several of the desired QR images. Something like the following:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- A4 size -->
<svg width="210mm" height="297mm" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="_qr_image_here_1_" x="0" y="0" height="50px" width="50px"/>
<image xlink:href="_qr_image_here_2_" x="60" y="0" height="50px" width="50px"/>
... <!-- More Images --> ...
</svg>
Code a shell script that calls sed to replace the xlink:href="_qr_image_here_N_" attributes with the path to the QR images you want to fit in (the svg file tools would take care of the resizing process for you).
Generate several of these svg documents from your script, these files will represent the pages of your doc.
Convert all the svg files to pdf, you can use rsvg-convert for this, more info here.
Merge all the pdf generated pages into one pdf file, you can use pdftk for this, also you can find info on how to do this step here.
I have SVG files created elsewhere (using MS Visio) which I would like to use as background for a visualization, where some positioning is driven by the placement of items in the SVG graphic. Ideally, I would be able to manipulate the imported SVG data directly, and then use it to create elements in the calling document using D3.
Is there a simple way to import an existing SVG document into a data structure using D3, similarly to the way that JSON can be imported? I've tried d3.xml, but don't seem to get a useful data structure. Importing the graphic with an IMG tag doesn't populate the DOM with SVG elements as far as I can see.
One small complication: it must also work in IE9! (ImportNode doesn't work)
Thanks for the ideas. I found out what to do in the end. It is possible to import the SVG file using a d3.xml call. The parsing is done, but the complication is how to understand the DOM structure which is produced. IE9 seems to have a problem with placing the imported node, but I don't need that behaviour as I only want to use aspects of the incoming SVG, and will be regenerating SVG using D3