I've been trying to figure this one out for a few days, the material icons are a bit too thick, so I downloaded one and have been trying to change the stroke weight / thickness. But just using the stroke-width property doesn't change anything, and if I add a 'stroke' it also adds a border around the element.
For example, here is the 'public' icon from google / material icons
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-.61.08-1.21.21-1.78L8.99 15v1c0 1.1.9 2 2 2v1.93C7.06 19.43 4 16.07 4 12zm13.89 5.4c-.26-.81-1-1.4-1.9-1.4h-1v-3c0-.55-.45-1-1-1h-6v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41C17.92 5.77 20 8.65 20 12c0 2.08-.81 3.98-2.11 5.4z"/>
</svg>
How would I go about making this thinner or thicker? Is there a minimum font weight? ( I want some pretty thin strokes for this)
The design of the icon is your problem
Paste the path in https://yqnn.github.io/svg-path-editor/
If you want more detail you need to edit the (filled) path.
Related
This question already has answers here:
SVG rounded corner
(15 answers)
Closed 3 months ago.
I am trying to create a triangle (polygon element) using svg. Is it possible to give it a rounded corners?
I am thinking about using the same option as in this case (https://www.w3schools.com/graphics/svg_rect.asp) in example 4, but I am not sure how to do it.
Its solution is shown here. stackoverflow.com/questions/10177985/svg-rounded-corner
First of all, you should do your research. But the solution is as follows.
<svg width="440" height="440">
<path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="black" stroke-width="3" />
</svg>
Also, if you want to practice live, visit this page. plnkr.co/edit/kGnGGyoOCKil02k04snu?preview
I'm trying to draw a partial circle with svg's path. I have the circle center coordinates, radius and the start/end coordinates (where the partial circle will end), but I can't wrap my head around on how to draw the circle.
I hope that this small example can help you. The path starts in 50%,50% (center), moves to 50%,0 (that is 12 o'clock), creates an arc where radius x and y are 50 (the fist two numbers after a) and ends in the position that is a calculation with sin() and cos() on 45 degrees (the angle should be in radians). The three numbers in between (0 0 1) are flags.
See more here: d - Elliptical Arc Curve
// 45 deg:
console.log(Math.cos(Math.PI/4)*50, 50-Math.sin(Math.PI/4)*50);
document.querySelector('path')
.setAttribute('d', `M50,50 L50,0 a 50 50 0 0 1 ${Math.cos(Math.PI/4)*50} ${50-Math.sin(Math.PI/4)*50} z`);
<svg width="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="lightblue" />
<path fill="navy" />
</svg>
Folks, let me start by saying that StackOverflow has been invaluable help in my project to design an open-source javascript eye-testing chart. Thank you all.
My question is how best to draw a capital letter R in a 5 high by 4 wide grid, that will work at 0.1 alpha (so no overlapping elements allowed).
Here's my best attempt so far. The difficulty is in the meeting between the arc and the diagonal, which is not a straight line.
<svg id="Snellen_R" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;">
<path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5"
stroke="black" fill="none" stroke-width="1" >
</path>
<polygon points="1.4,3 2.1,3 2.2,2.99 2.3,2.98 2.35,2.97 2.4,2.96 2.45,2.95 2.5,2.94 4,5 2.8,5" fill="black" />
</svg>
Thanks.
Inkscape may be able to help you. It's an open source vector graphics editor. I've used it several times for creating text graphics. If anything you can use Inkscape to draw your letter, and then look at the code it generates. You can also save your graphic to a .svg file, or export to another format such as .png.
Here is the link:
https://inkscape.org/en/
Plenty of youtube tutorials out there as well. Good luck!
There's actually no problem having elements overlapping. Just apply the opacity setting to the whole <svg> element instead of setting separate fill-opacity and stroke-opacity values for the drawing elements inside it.
<p>
<svg viewBox="0,0,4,5" height="100" style="margin: 3.49mm;">
<path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5" stroke="black" fill="none" stroke-width="1" stroke-opacity="0.1">
</path>
<polygon points="1.32,2.9 2.12,2.9 2.42,2.9 4,5 2.8,5" fill="black" fill-opacity="0.1" />
</svg>
<br/>Opacity applied to <tt><path></tt> and <tt><polygon></tt> elements</p>
<p>
<svg viewBox="0,0,4,5" height="100" style="margin: 3.49mm; opacity:0.1">
<path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5" stroke="black" fill="none" stroke-width="1">
</path>
<polygon points="1.32,2.9 2.12,2.9 2.42,2.9 4,5 2.8,5" fill="black" />
</svg>
<br/>Opacity applied to <tt><svg></tt> element</p>
I need to create a block with specific borders around it:
I want to have this block scalable, that is why I try doing it with svg.
Here is what I've done:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none slice" viewBox="0 0 300 400">
<path stroke-width="1" stroke="#7DD37D" fill="red" d="
M20 0h260
m20 20v360
m-20 20H20
m-20 -20V20
M0 20a20 20 0 0 0 20 -20
M300 20a20 20 0 0 1 -20 -20
M300 380a20 20 0 0 0 -20 20
M0 380a20 20 0 0 1 20 20" id="path"/>
</svg>
Demo on codepen
The border was created as path from lines and arcs.
The problem is, that I can't make svg to fill the area inside this path. It fills some space inside arcs instead of rectangle. What I'm doing wrong?
When I do something similar with Inkscape, the resulting path is combined from lines and Cubic Bezier curves. Can it be done with simple arcs instead of Bezier curves?
Each time you use a move ('m' or 'M') path command, it creates a new subpath. Each subpath gets filled, not the whole thing.
If you want the whole thing filled, it has to be a continuous path. In other words, in this case, it should be a move followed by a line, then an arc, then another line, and arc, and so on until you have completed all four sides of the shape.
The SVG I'm working with has a drop shadow via feGaussianBlur filter.
The shadow itself is displayed properly, but gets cut off on top and bottom edges.
Like so:
The SVG in question is:
<?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 height="600" version="1.1" width="700" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<filter id="SVGID_0">
<feGaussianBlur in="SourceGraphic" stdDeviation="6.6"/>
<feOffset dx="0" dy="0"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<path d="M 0 83 Q 0 83 0 83 Q 0 83 6 79.5 Q 12 76 17 71 Q 22 66 30.5 57.5 Q 39 49 54 36 Q 69 23 82.5 16.5 Q 96 10 120 4.5 Q 144 -1 170.5 0 Q 197 1 218 16.5 Q 239 32 253.5 51 Q 268 70 278 83.5 Q 288 97 299 110 Q 310 123 320 129.5 Q 330 136 338 136.5 Q 346 137 355 129.5 L 364 122" stroke-linecap="round" style="stroke: #005e7a; stroke-width: 30; fill: none; filter: url(#SVGID_0);" transform="translate(50 50)" />
</svg>
The cropping seems to happen consistently in Chrome (30), Firefox (25), and Opera (12).
I can see that it's not a viewbox limitation, as it's set to 600x700.
I can also see in devtools inspector the bounding box of <path> element, and it's almost as if that's what cuts off the shadow:
If that's the case:
Why is the shadow only cut off vertically and not horizontally?
How to work around it, so that it's not clipped like this?
If it's not the bounding box, what causes this and how to avoid this clipping?
You need to increase the size of the filter region.
<filter id="SVGID_0" y="-40%" height="180%">
works just fine. The silent defaults for the filter region are: x="-10%" y="-10%" width="120%" height="120%" - large blurs usually get clipped. (Your shadow isn't getting clipped horizontally because your width is about 2.5x your height - so that 10% results in a wider horizontal filter region). Also, the y filter region seems to be calculated as if the path had a zero pixel stroke, so it's ignoring the stroke width. (Different browsers have different behavior wrt whether they consider the stroke to be part of the bounding box for purposes of filter region calculation.)
(Update: Moving up observations from comments)
Please note that if your particular shape is either zero width or zero height (e.g. a horizontal or vertical line), then you must specify filterUnits="userSpaceOnUse" as part of the filter declaration and explicitly specify a filter region (x,y,width height) in userSpaceUnits (usually pixels) that creates enough room to display a shadow.
Add an attribute to the filter shadow svg tag:
filterUnits="userSpaceOnUse"
Final Output:
<filter id="dropshadow" filterUnits="userSpaceOnUse" height="800" width="1600">
Which makes the shadow absolutely positioned and visible outside of its container.
If you're using it inside an HTML, you can simply use CSS properties to fix this issue.
svg {
overflow: visible !important;
}
I haven't checked other browsers, but chrome has the overflow: hidden by default on svg tags.
A bit late, but I hope it's helpful.