Is there any place where I can upload an icon and get an SVG string vector?
Also, what are those tags in the code below?<g> <path> and viewBox, data-original, xmlns, d tags are?
Lately, Is the performance worth using SVG in place of regular icons?
<svg viewBox="0 0 512 512">
<g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0"
data-original="#bfc9d1"
/>
</g>
</svg>
Here's a very good guide to using SVG with react. https://www.sanity.io/guides/import-svg-files-in-react
There are many online convertors you can use to create svg's
e.g https://www.pngtosvg.com/
The SVG <g> element is used to group SVG shapes together.
The SVG <path> element indicates that the vector to draw is a path. The could alternatively be a polyline or a shape e.g circle.
The <viewBox> attribute is a list of four values: min-x, min-y, width and height
The xmlns attribute is XML Namespace which is needed to use the correct DTD - Doctype Declaration
The <d> attribute defines the path that will be drawn.
From my experience SVG performs significantly faster when using inline SVG's.
The main blocking element for page loading is the numberous amount of files that load sequentially. Using inline svg loads all the images within the page file.
The major benefit of SVG's are the scalability of vector over raster when zooming or viewing at differant resolutions.
Related
I've a lot of SVG files (several graphics like, dogs, trees, birds, buildings etc.), and they are from different sources from web. I need to define height and width of these SVGs.
Example File:
<svg id="svg1" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
<path d="m18 0.0938-17.719 16.281h5.5625v15.531h24.312v-15.531h5.5625l-17.719-16.281z"/>
</svg>
I get the width and height of this:
var svg1 = document.getElementById('svg1');
console.log('client', svg1.clientWidth + 'x' + svg1.clientHeight);
And then modified the file with the results:
<svg width="630" height="577" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
<path d="m18 0.0938-17.719 16.281h5.5625v15.531h24.312v-15.531h5.5625l-17.719-16.281z"/>
</svg>
I am experienced in javascript and c#, but I don't know a way to achieve this.
P.S: The reason I need this: My wordpress custom product designer plugin uses SVG files to design custom products, but those SVG files must have width and height for my plugin to work properly.
if you are using SVG from material-ui, wrap it inside an IconButton (and define the height and width here). The svg takes the dimensions of the parent.
I'm trying to animate an svg path using this technique by Jake Archibald
The technique works well when the svg code is pasted in my document, but fails when I'm referencing the svg from my "defs.svg" file.
My defs.svg looks like this:
<svg xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 48 50.6" id="icon-result" fill="#FFF">
<path d="M19 49.4c-2 1.7-5.1 1.5-6.9-.5l-11-12.8c-1.7-2-1.5-5.1.5-6.9 2-1.7 5.1-1.5 6.9.5l11 12.8c1.8 2.1 1.6 5.2-.5 6.9z"/>
<path d="M13.6 49.4c-2.2-1.5-2.9-4.5-1.4-6.8L39 2.2C40.5 0 43.5-.7 45.8.8c2.2 1.5 2.9 4.5 1.4 6.8L20.3 48.1c-1.4 2.2-4.5 2.8-6.7 1.3z"/>
</symbol>
</svg>
In my code I do the following:
<svg class="Dashboard__nav-icon">
<use xlink:href="/svg/defs.svg#icon-result" />
</svg>
When trying to animate the code this way I get null when trying to get the path by using Jake Archibalds technique linked above. Is there a way to get the path while still using a separate defs.svg file and the <use> tag?
You won't be able to get the DOM path element via the second <svg> element. That is because elements referenced via a <use> do not appear in the DOM tree where they are used. So the following will not work:
var path = document.querySelector('.Dashboard__nav-icon path');
The symbols elements are not visible in the main document's DOM tree.
However you would be able to reference the paths directly via their definition. But for that to work you would need to inline the defs.svg file.
So, if the defs.svg is in the same file, then you would be able to use:
var path = document.querySelector('#icon-result path');
Hello I came across a really interesting looking website :
http://digitalbakery.org/
I wonder how did they provide a background image for the animated SVG Path elements?
I have tried to set a background image for SVG before. Did not work. However looking in the DOM I see in fact the images and SVG are entirely separated. The img are in a ul element specified somewhere.
Is the Path element, when hover, has its opacity reduced to zero hence revealing the img underneath? If so I cannot seem to figure out how is the exact location worked out. How can this effect be achieved?
I have used the named clipPath to crop images. The simplest example:
<svg id="pLayout">
<g>
<clipPath id="hex-mask">
<path d="..."></path>
</clipPath>
</g>
<image x="..." y="..." xlink:href="..." **clip-path="url(#hex-mask)"** />
</svg>
Location calculates by container's vertexes.
Sorry for my English.
I want to draw a diagram with jsPlumb and export captured image.
Jsplumb rendered in svg like this:
<svg style="position:absolute;left:457.05px;top:227.65px;z-index:-5;" width="476.9" height="233.7" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector ent0 ent1 Line"><path d="M 112.95 178.35 L 363.95 55.35" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="black" stroke-width="5"/><path d="M 112.95 178.35 L 363.95 55.35" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="blue" stroke-width="3"/></svg>
I want to this convert to canvas (which I can convert to image with html2canvas - I try this way: Google docs) or direct to image. jsPlumb generate SVG in html and not a file, so I can't use svgeezy. I try use canvg, but I can't (bad documentation).
I need a client-side solution or something easier server-side solution.
Example code for jsPlumb: http://jsfiddle.net/WRUra/3/ You just connect div1 to div2 or div3 container and the connector element rendered in svg.
Regards, Zserrbo
If you use canvas mode the connections can easily copied to another canvas.
make a big canvas copy all canvas connections to the canvas in the
right place
for each divs measure its top, left, width, height, and
get the inner text
draw rectangles on the big canvas
draw text inside the rectangles
export big canvas to image
I have built a d3 force directed graph with grouped nodes. I want to enclose the groups inside cloud like structure. How can I do this?
Js Fiddle link for the graph: http://jsfiddle.net/Cfq9J/5/
My result should look similar to this image:
This is a tricky problem, and I'm not wholly sure you can do it in a performative way. You can see my static implementation here: http://jsfiddle.net/nrabinowitz/yPfJH/
and the dynamic implementation here, though it's quite slow and jittery: http://jsfiddle.net/nrabinowitz/9a7yy/
Notes on the implementation:
This works by masking each circle with all of the other circles in its group. You might be able to speed this up with collision detection.
Because each circle is both rendered and used as a mask, there's heavy use of use elements to reference the circle for each node. The actual circle is defined in a def element, a non-rendered definition for reuse. When this is run, each node will be rendered like this:
<g class="node">
<defs>
<circle id="circlelanguages" r="46" transform="translate(388,458)" />
</defs>
<mask id="masklanguages">
<!-- show the circle itself, as a base -->
<use xlink:href="#circlelanguages"
fill="white"
stroke-width="2"
stroke="white"></use>
<!-- now hide all the other circles in the group -->
<use class="other" xlink:href="#circleenglish" fill="black"></use>
<use class="other" xlink:href="#circlereligion" fill="black">
<!-- ... -->
</mask>
<!-- now render the circle, with its custom mask -->
<use xlink:href="#circlelanguages"
mask="url(#masklanguages)"
style="fill: #ffffff; stroke: #1f77b4; " />
</g>
I put node circles, links, and text each in a different g container, to layer them appropriately.
You'd be better off including a data variable in your node data, rather than font size - I had to convert the fontSize property to an integer to use it for the circle radius. Even then, because the width of the text isn't tied to the data value, you'll get some text that's bigger than the circle beneath it.
Not sure why the circle for the first node isn't placed correctly in the static version - it works in the dynamic one. Mystery.