I like to draw in a HTML page. The diagram might contain dots,lines,polygons,circles,eclipse etc. Which is the best way to do this. I want the solution to load very fast in websites. could you help me with a solution with an example
Use an SVG (Scalable Vector Graphic). It's exactly what you're looking for, and more.
<svg width="500" height="200">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<rect x="100" y="10" width="50" height="50" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
<ellipse cx="250" cy="60" rx="100" ry="50" style="fill: yellow; stroke:purple; stroke-width: 2" />
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
<text x="200" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
Plain SVG is a good solution if you want to display something that you have already drawn.
On the other hand, if you want users to do their own drawing, it would be a lot easier to use libraries designed to draw diagrams. Such libraries can use either SVG or Canvas internally, it doesn't matter too much, since the point is not having to learn SVG or Canvas.
An example of such a library is one I created, GoJS. See examples at http://gojs.net/latest/samples/index.html.
Related
I have an SVG element that is composed of a shape and text. This element is replicated several times inside the SVG file and I wanted to take advantage of the symbol and use tags.
But I need to be able to pass values to update the text nodes inside the symbol as each symbol will have it's own value.
Is there a way to do this without Javascript?
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 800 800">
<defs>
<g id="Initials">
<circle id="bgColor" cx="200" cy="200" r="80" class="cls-9"/>
<text id="label" fill="white" font-size="50" transform="translate(170, 220)">
10
</text>
</g>
</defs>
<use href="#Initials" />
<use href="#Initials" x="200" y="0" />
</svg>
I have and SVG icon I need to use in a several toolbars on a page.
If I add the SVG code to the location in the toolbar, it works. However, since I need to use it many times I'm trying to define it one at the bottom of the page and then with "use" having it displayed in several places.
So I define it:
<svg>
<defs>
<g id="svgHelp" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
<path d="M1 12c0-6.075 4.925-11 11-11s11 4.925 11 11-4.925 11-11 11-11-4.925-11-11z"/>
<path d="M11.792 14v-1c1.609 0 3-1.391 3-3s-1.391-3-3-3c-1.194 0-2.342.893-2.792 1.921"/>
<path d="M12 17v1"/>
</g>
</defs>
</svg>
And then try to use it:
<use xlink:href="#svgHelp" x="0" y="0" />
But it does not display. What am I missing here?
I believe <use> must be wrapped by <svg>
<svg>
<use xlink:href="#svgHelp" x="0" y="0" />
</svg>
I've got multiple inline svgs. In all of those there is a common path + an image. Usually this common part is supposed to change regularly.
So if I save the common area as a separate svg file. Is it possible to call the common svg file in to another inline svg?
E.g.:
main.svg
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
//I need to include external.svg here
</svg>
external.svg
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
<image width="20" height="20" xlink:href="man.png"></image>
If you are embedding the SVGs using an <img> (or background-image), then those SVGs must be self contained. They cannot reference other external files whether they be CSS, images, fonts or other SVGs.
However it should work if you use inlined SVGs, <object> etc.
I recently had an svg element that I created, and it was working locally with the self-closing tags like this:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 25px; width: 300px; display: inline-block;">
<circle cx="10" cy="10" r="4" stroke="black" stroke-width="1" fill="none" />
<line x1="14" y1="10" x2="286" y2="10" stroke-width="2" stroke="black" />
<circle cx="290" cy="10" r="4" stroke="black" stroke-width="1" fill="none" />
</svg>
but when rendered on the production server it came out with everything nested. The first circle was correctly nested in the svg element, but the line was nested within the first circle, and the second circle was nested within the line. The ending closing tag lines looked like: </circle></line></circle></svg>
I had to change the svg elements to use closing tags like so:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 25px; width: 300px; display: inline-block;">
<circle cx="10" cy="10" r="4" stroke="black" stroke-width="1" fill="none" ></circle>
<line x1="14" y1="10" x2="286" y2="10" stroke-width="2" stroke="black" ></line>
<circle cx="290" cy="10" r="4" stroke="black" stroke-width="1" fill="none" ></circle>
</svg>
Everywhere i look it suggests that closing tags on svg elements are optional. What gives?
There is nothing wrong with your initial markup (as you can see: http://jsfiddle.net/6b0fv1a2/), so that makes me believe that it's your server's mime types.
Apache:
"Though the SVG MIME Type has been included by default in the list of supported MIME Types in the Apache Web server since version 1.3.x, older versions may need to be updated."
.htaccess
Perhaps the easiest way to set the correct MIME Type is to use an ".htaccess" file. This is a configuration file that is often hidden. If your server does not have such a file, create a file and name it ".htaccess", and associate the SVG file extensions with the correct MIME Type; if the file already exists, you can simply add the correct entries to it. The particular lines you should add are:
AddType image/svg+xml svg
AddType image/svg+xml svgz
Read more (and other servers): http://www.w3.org/services/svg-server/
Is there a way to render svg elements with crisp edges while still keeping anti-aliasing?
I'm creating a browser-based tool that works in modern browsers.
Playing around with the shape-rendering attribute doesn't give me the results I'm looking for.
I want my elements to have nice anti-aliasing so that the paths look smooth like below with shape-rendering: auto:
But I also want elements that don't require anti-aliasing, like the start box to look sharp and crisp, such as when rendered with shape-rendering: crispEdges:
Is this possible? Am I looking to have my cake and eat it too?
Perhaps you set shape-rendering property for root svg element.
You should set shape-rendering property for each shape elements, like this.
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges"
fill="none" stroke="black"/>
<path d="M80,30l100,100" shape-rendering="optimizeQuality"
stroke="black" stroke-width="5"/>
</svg>
If you want your boxes to appear sharp without any blurring due to antialiasing, and without using crispEdges mode, make sure the line edges are on pixel boundaries. So, for example, if your lines are an odd number of pixels wide, give them coordinates that are at 0.5 of a pixel.
<rect x="10.5" y="10.5" width="150" height="20"
stroke-width="1px" fill="none" stroke="black"/>
And on the boundary if the stroke width is even.
<rect x="10" y="10" width="150" height="20"
stroke-width="2px" fill="none" stroke="black"/>
Of course, this only really works if your SVG is being rendered at 1:1. That is, it's not being rescaled by the browser. And only for lines that are horizontal and vertical.
[I'm posting this as an answer rather than a comment, because I want to post a picture. Otherwise, this is a comment on the useful post by #defghi1977 . +1 to him, by the way.]
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges"
fill="none" stroke="black" />
<rect x="10" y="50" width="150" height="20" shape-rendering="auto"
fill="none" stroke="black" />
<path d="M40,30l100,100" shape-rendering="crispEdges"
stroke="black" stroke-width="5" />
<path d="M80,30l100,100" shape-rendering="auto"
stroke="black" stroke-width="5" />
</svg>
Produced
This was rendered by Firefox 38.0.5 .
In Internet Explorer 11, both shape-rendering setting produces the same result with anti-aliasing and not crisp.