Dev Stack Source

Answer : The SVGPathElement API has built-in methods for getting this info. You do not need to parse the data-string yourself. Since you stored a selection for your line as a variable, you can easily access the path element's api using myLine.node() to refer to the path element itself. For example: var pathElement = myLine.node(); Then you can access the list of commands used to construct the path by accessing the pathSegList property: var pathSegList = pathElement.pathSegList; Using the length property of this object, you can easily loop through it to get the coordinates associated with each path segment: for (var i = 0; i < pathSegList.length; i++) { console.log(pathSegList[i]); } Inspecting the console output, you will find that each path segment has properties for x and y representing the endpoint of that segment. For bezier curves, arcs, and the like, the control points are also given as x1 , y1 , x2 , and y2 as necessary. In your case, regardless of whether yo...

Answer : Use XMLSerializer to convert the DOM to a string var s = new XMLSerializer().serializeToString(document.getElementById("svg")) and then btoa can convert that to base64 var encodedData = window.btoa(s); Just prepend the data URL intro i.e. data:image/svg+xml;base64, and there you have it. You can do it relatively straightforwardly as follows. The short version is Make an image not attached to the dom Set its size to match the source svg base64 encode the source svg , append the relevant data, set img src Get the canvas context; .drawImage the image <script type="text/javascript"> window.onload = function() { paintSvgToCanvas(document.getElementById('source'), document.getElementById('tgt')); } function paintSvgToCanvas(uSvg, uCanvas) { var pbx = document.createElement('img'); pbx.style.width = uSvg.style.width; pbx.style.height = uSvg.style.height; pbx.src = 'data:...

Answer : Here is what I did using cairosvg: from cairosvg import svg2png svg_code = """ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"/> <line x1="12" y1="8" x2="12" y2="12"/> <line x1="12" y1="16" x2="12" y2="16"/> </svg> """ svg2png(bytestring=svg_code,write_to='output.png') And it works like a charm! See more: cairosvg document The answer is " pyrsvg " - a Python binding for librsvg. There is an Ubuntu python-rsvg package providing it. Searching Google for its name is poor because its source code seems to be contained in...

Answer : As a side note, I found that getting transparency was a bit tricky. Instead of using transparent , I had to use none . convert -background none in.svg out.png Inkscape will do this: inkscape \ --export-png=out.png --export-dpi=200 \ --export-background-opacity=0 --without-gui in.svg Update The terminology has changed: all the export params suppress gui, and the output parameter is now simply based on the file type. For example, a type of png will cause a file in /path/to/picture.svg to be exported as /path/to/picture.png (caution: this overwrites output). inkscape \ --export-type=png --export-dpi=200 \ --export-background-opacity=0 picture.svg Note cited wiki has quotes on --export-type=png , which is incorrect. Also if don't have Inkscape command line, MacOS can access via bash directly: /Applications/Inkscape.app/Contents/MacOS/inkscape Actually, reading imagemagick documentation: -antialias Enable/Disable of the rendering of anti-aliasing pix...

Answer : Currently what's working best for me on linux is the following: epstopdf foo.eps pdf2svg foo.pdf foo.svg I believe the first command is a wrapper for ghostscript, and the second is a wrapper for calls to the Poppler and Cairo libraries. On ubuntu, they're in the packages texlive-font-utils and pdf2svg. Gradients come out looking right, but don't seem to be editable in inkscape. I tried using inkscape and uniconverter for this purpose, and as of Jan 2013, both seemed broken when tested on an example containing nothig but some very simple line art. Inkscape throws errors and can't open the eps file. Uniconverter crashes. Scribus and sk1 may work, but seem awkward and not really suited for this task. Uniconvertor is currently the most convenient option. It's a command-line tool that shares code with the sK1 Project. You won't have to bother cropping the image in sK1 if you use uniconvertor, so it's more automated. Run it like this: uniconvertor befo...

Answer : It appears that all of the JavaScript must be included inside of the SVG for it to run. I was unable to reference any external function, or libraries. This meant that your code was breaking at svgstyle = svgobj.getStyle(); This will do what you are attempting. <?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"> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> <script type="text/ecmascript"><![CDATA[ function changerect(evt) { var svgobj=evt.target; svgobj.style.opacity= 0.3; svgobj.setAttribute ('x', 300); } ]]> </script> <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' /> </sv...

Answer : Update 2019: There is no need of using any external tool or Heck as pointed by older answers. Android Studio's Asset Studio allows to convert SVG/ PSD to vectors Right click on app folder-> New Vector Asset Select second option in radio button to create vector from local file as shown in below image. Click on folder icon to load local SVG file and it will automatically convert that into vector: Have you tried Shape Shifter? Its meant as a program to let you animate vectors and svgs easily, but you can import your .svg and export to a Vector Drawable straight away. It should keep your group structure too (but I make no promises as I haven't done so explicitly myself). Create a blank xml file. write all attributes of a VectorDrawable except pathdata. Open the SVG file in wordpad. Copy the pathdata and then paste it in the xml file you created. Example SVG: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG...

Answer : That's funny you asked this, I just did this recently for my work's site and I was thinking I should write a tutorial... Here is how to do it with PHP/Imagick, which uses ImageMagick: $usmap = '/path/to/blank/us-map.svg'; $im = new Imagick(); $svg = file_get_contents($usmap); /*loop to color each state as needed, something like*/ $idColorArray = array( "AL" => "339966" ,"AK" => "0099FF" ... ,"WI" => "FF4B00" ,"WY" => "A3609B" ); foreach($idColorArray as $state => $color){ //Where $color is a RRGGBB hex value $svg = preg_replace( '/id="'.$state.'" style="fill:#([0-9a-f]{6})/' , 'id="'.$state.'" style="fill:#'.$color , $svg ); } $im->readImageBlob($svg); /*png settings*/ $im->setImageFormat("png24"); $im->resizeImage(720, 445, imagick...

Answer : As you mentioned, the correct Content-Type for SVG files is "image/svg+xml". Even if the AWS console does not provide that value in the Content-Type selection field, you can enter it anyway and S3 will accept it. AWS specifies the following in their API docs for the Content-Type header: A standard MIME type describing the format of the contents. For more information, go to http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17. Type: String Default: binary/octet-stream Valid Values: MIME types Constraints: None For additional details see http://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPUT.html

Answer : Yes, with the <foreignObject> element, see this question for some examples. Alternatively, if you have an html5 document you can also use CSS positioning and z-index to make parts of html visible where you want laid out on top of the svg. If you do it like that you don't need to nest the html inside the svg fragment. This will give you the most consistent behaviour across browsers in my experience. Foreign Objects are not supported on Internet explorer. Please check ForeignObject Copied from bl.ocks.org (thank you, Janu Verma) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML inside SVG</title> <style type="text/css"></style></head> <body> <div>I'm a div inside the HTML</div> <svg width="500" height="300" style="border:1px red solid" xmlns="http://www.w3.org/2000/svg"> ...

Answer : jQuery plugin for decorating image maps (highlights, select areas, tooltips): http://www.outsharked.com/imagemapster/ Disclosure: I wrote it. Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable. A couple of options if you need something more advanced: http://jqvmap.com/ http://jvectormap.com/ http://polymaps.org/ I think it's better to divide my answer to 2 parts: A -Create everything from scratch (using SVG, JavaScript, and HTML5): Create a new HTML5 page Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file, (I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape) Add mouseover and click events t...