I need to draw a 1px grid (10px spacing) using the SVG canvas embedded within a webpage. There are many SVG tags to choose from and I was hoping someone could suggest what tags would be best suited for the job and produce the least amount of code.
For instance, is there a shorter alternative to plotting the path using the <path> tag? Perhaps by defining a square 10px x 10px then somehow repeating it accross the canvas.
Anyway, open to suggestions please.
Thanks
You can make a <pattern> (essentially the tile in your question) and fill any shape with that.
Here's an example of that technique.
I'm not an expert (day 3!), but I do know that Google uses rects to do this on Google charts, with either a width or a height equal to 1. Nothing fancy, just write the grid with lots of stuff like this:
<rect x="86" y="61" width="1" height="198" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="1" stroke-dasharray="0" fill="#cccccc"></rect>
Why do they do this? Don't know. Their graphics are good, so someone has presumably thought about it. My own inclination is to do this with paths, using 'h' and 'v' for relative horizontal and vertical lines. It's more compact, but the output may not be so good.
Related
I created an svg pattern which I feel with image. The thing is that the image is quite large (over 2mb) and it takes long to load (I keep it in assets folder in my app). However I checked that it works similarly with images that are large and downloaded from the web.
Is there a way to make big images load faster (so that this yellow svg pattern behind the image is not visible, while images did not finish loading) in svg?
<pattern id="pattern0" patternContentUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://images.hdqwalls.com/download/blue-light-buildings-architecture-8k-dv-7680x4320.jpg" x="0" y="0" width="100%" />
</pattern>
Example provided here
https://codepen.io/pokepim/pen/bGeMmNB
So as you can see the image laods slowly and the yellow black gradient is clearly visible at the beginning when page is loading.
One or more things you could do:
Reduce the resolution. 7680x4320 is way larger than you need for typical screen sizes.
Approx 15-20% of the image at the bottom is never visible. It could be trimmed.
Increase the compression ratio.
Just by reducing the size to 1600x700 (steps 1 & 2), I was able to reduce the file size to 250k, even with minimum JPEG compression.
Other things you could do:
Embed the image in the SVG as a Data URI (data://), so that the image loads as part of the SVG
Display a low resolution version of the image while the larger image is loading (eg BlurHash)
You can make the SVG hidden during the load and display it when finished loading with javascript.
You will need to add and reference ID to the SVG and make it hidden.
Then on image loaded, change to display block.
Here and example (not elegant one, don't use in production)
<svg
id="image-bg"
style="display: none;"
...
>
...
<pattern ...>
<image
...
onload="document.getElementById('image-bg').style.display='block'"/>
</pattern>
...
</svg>
https://css-tricks.com/illustrator-to-svg/
Here is a good website with some details.
Saving the svg with the image "embedded" in the svg as data rather than referencing it like that in the svg will vastly improve your load times.
I started learning SVG. Using polygons I have created a Star. While further reading I found a fill-rule property which can take two attributes first one is nonzero which will fill colour in whole the shape and another one is evenodd which will fill colour in odd points and even points will remain unfilled. When I used evenodd it filled the outer part of the star and left the centre blank.
How can I fill the centre or even points only of the star?
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
This will generate a star ditto to the 1st imageSide-Filled star
and I want only center to be filled check 2ndimage.Cneter fill star only
evenodd which will fill colour in odd points and even points will remain unfilled.
That sounds to me like you are misunderstanding what even-odd fill is. The description from the SVG specification describes it this way:
This rule determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.
So in the case of your star, an imaginary line from a point in the centre of the star to the outside of the star always crosses two lines. So the inside is not considered part of the fill.
How can I fill the centre or even points only of the star?
I don't know what you mean by this. What are the "even points" of the star?
Do you mean that you want to choose which of the six parts (center + 5 points) of the star get filled? If so, then fill-rule won't help you. You will need to create and fill those shapes yourself.
For example:
<svg height="210" width="500">
<!-- centre -->
<polygon points="78,78 122,78, 136,121 100,150 64,121" style="fill:lime;"/>
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:none;stroke:purple;stroke-width:5;"/>
</svg>
How can one get a scalable SVG image with texts with different sizes, all centred both vertically and horizontally?
What I would like to achieve:
What I have tried so far (JSFiddle demo):
<text x="50" y="30"
style="text-anchor: middle;alignment-baseline:middle"
fill="black" font-family="'Arial'" font-size="20">
H1 HEADLINE</text>
<text x="50" y="45"
style="text-anchor: middle;alignment-baseline:middle"
fill="black" font-family="'Arial'" font-size="15">
H2 HEADLINE</text>
Thanks in advance for any tips :) I cannot use JavaScript.
From section 10.1 of SVG 1.1:
SVG performs no automatic line breaking or word wrapping. To achieve the effect of multiple lines of text, use one of the following methods:
The author or authoring package needs to pre-compute the line breaks and use multiple ‘text’ elements (one for each line of text).
The author or authoring package needs to pre-compute the line breaks and use a single ‘text’ element with one or more ‘tspan’ child elements with appropriate values for attributes ‘x’, ‘y’, ‘dx’ and ‘dy’ to set new start positions for those characters which start new lines. (This approach allows user text selection across multiple lines of text -- see Text selection and clipboard operations.)
Express the text to be rendered in another XML namespace such as XHTML [XHTML] embedded inline within a ‘foreignObject’ element. (Note: the exact semantics of this approach are not completely defined at this time.)
As such, you need to either manually calculate the vertical location to get vertical centering, or use <foreignObject> to embed HTML+CSS within your SVG (at the correct location) which can perform vertical centering, e.g. using display:table-cell; vertical-align:middle.
Observe Image below. It is a composite of two graphs, where different curves are shown in solid lines, dotted lines, and variations of dashed lines with different length of stroke.
TL;DR
I need a way to generate solid lines, dashed lines, dotted lines using basic/simplest HTML/CSS possible in hopes that tcpdf rendering engine will understand, since tcpdf does not deal well with lastest and greatest HTML/CSS markup. How?
Details you may not need, but may appreciate:
I am using flot + tcpdf to generate these, where graphs are first generated on canvas, and canvas are then transferred to PDF engine and everything seems to work fine except the legend. The legend of the curves is not being transferred to canvas, due to flot not having the capacity just yet to write its legend onto canvas. It writes it onto DIV in HTML/CSS, and the legend code generated by flot translates horribly (i.e. it did big ugly rectangles instead of lines) to tcpdf's native weak HTML-to-pdf rendering engine. In other words, I need to create my own legend using most basic HTML/CSS, and hope that tcpdf will understand and render it correctly.
use SVG, not HTML/CSS.
http://www.tcpdf.org/doc/code/classTCPDF.html#a56536508fb1b5aede7d2ed27f56c2353
<svg height="30" width="100">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="20,10" d="M5 2 300 0" />
</g>
</svg>
I am new to this. I want to make a clock similar to the one given here. But they have used images. Instead I want to make use of ARC. Does anyone know, how can we make an arc, that too using only css? Consider an example that I have to make an arc of 15 degrees. Any kind of suggestions are greatly appreciated.
Thanks in advance.....
I'd recommend you use SVG to do this. The markup is fairly simple, but you'll need to stay aware that there are four different rules which affect which side of the two end points the bulge of the arc with lay and if the bulge will try to take the "short way" or the "long way" with the given radius.
Here's an example. Use a stylesheet like this:
.arc{
fill:tan;
stroke:red;
stroke-width:4px;
}
combined with an svg path like this:
<svg width="100" height="100">
<path d="M 10,40 A 50,50 0 0 1 90,70"/>
</svg>
In short the commands in the above example are
M (move mode with absolute coordinates)
x,y (start the arc here here)
A (arc mode with absolute coordinates)
r1,r2 (the two radius of the ellipse that the arc goes around. use the same value twice for a circle)
z rotation (the rotation of that ellipse. 0 is no rotation)
large arc flag (see fiddle link below)
sweep flag (see fiddle link below)
x,y (where the arc will end)
I made this fiddle to demonstrate all the different combinations of the two flags in movement which helps me a lot in deciding which ones to use. http://jsfiddle.net/rgbk/avpye8nm
The W3C docs are here: http://www.w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands They describe z rotation as "x-axis-rotation" which is wrong.
Does it have to be CSS ? or could you use HTL5 canvas?
http://www.w3schools.com/tags/canvas_arc.asp
then you could use that canvas to do the animation instead of using CSS animations...