Convert SVG polygon to path

Open your SVG in a web browser. Run this code: var polys = document.querySelectorAll(‘polygon,polyline’); [],convertPolyToPath); function convertPolyToPath(poly){ var svgNS = poly.ownerSVGElement.namespaceURI; var path = document.createElementNS(svgNS,’path’); var pathdata=”M “+poly.getAttribute(‘points’); if (poly.tagName==’polygon’) pathdata+=’z’; path.setAttribute(‘d’,pathdata); poly.getAttributeNames().forEach(function(name){ if(name !== ‘points’) path.setAttribute(name, poly.getAttribute(name)) }) poly.parentNode.replaceChild(path,poly); } Using the Developer Tools (or Firebug) of the browser, use “Copy as HTML” (or … Read more

is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]

you could use a gradient with stop-opacity to do this. you would add two “middle” stops with opacity 0 and 1 respectively an set the offset of both to the percentage you need. <svg xmlns=”” viewBox=”0 0 100 100″ width=”200″ height=”200″> <linearGradient id=”lg” x1=”0.5″ y1=”1″ x2=”0.5″ y2=”0″> <stop offset=”0%” stop-opacity=”1″ stop-color=”royalblue”/> <stop offset=”40%” stop-opacity=”1″ stop-color=”royalblue”/> … Read more

Why can’t I reference an SVG linear gradient defined in an external file (paint server)?

After more research, it looks like this is a browser support issue. See: Sadly, I’d come across this question before posting mine, and had thought that surely, in 5-1/2 years, browser support would have caught up – but that doesn’t appear to be the case. As of 2015, apparently Firefox and Opera are … Read more

SVG images blocked by gmail proxy

I’ve heard back from Google support, and they’ve confirmed there are currently no plans to support SVG images in the proxy. They said they account for only 1 in 100,000 email images. Apart from PhantomJs, an option for simpler svg is the php plugin ImageMagick. Here’s some sample code to get you started: header(“Content-Type: image/png”); … Read more

Pure SVG way to fit text to a box

I didn’t find a way to do it directly without Javascript, but I found a JS quite easy solution, without for loops and without modify the font-size and fits well in all dimensions, that is, the text grows until the limit of the shortest side. Basically, I use the transform property, calculating the right proportion … Read more

Simple fill pattern in svg : diagonal hatching

I did not find anything for diagonal hatching on the internet either, so I’ll share my solution here: <pattern id=”diagonalHatch” patternUnits=”userSpaceOnUse” width=”4″ height=”4″> <path d=”M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2″ style=”stroke:black; stroke-width:1″ /> </pattern> (note the lower case “l” in the path expression) The above creates a hatch with diagonal lines from the lower left … Read more

Converting an svg arc to lines

SVG elliptic arcs are really tricky and took me a while to implement it (even following the SVG specs). I ended up with something like this in C++: //————————————————————————— class svg_usek // virtual class for svg_line types { public: int pat; // svg::pat[] index virtual void reset(){}; virtual double getl (double mx,double my){ return 1.0; … Read more

SVG Image in JavaFX 2.2

Is there any way to display an SVG image in an JavaFX application? Here are some options: Create a WebView and load the svg image into the WebView’s WebEngine. The e(fx)clipse project includes an svg to fxml converter (link now dead :(). This NetBeans plugin also converts svg to fxml (link now dead :(). You … Read more