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
Related
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.
I'm drawing objects and using a filter to invert the colours. However, the colours aren't coming out correctly.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="441" height="433">
<defs>
<filter id="f1">
<feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="220.5" cy="86" r="30" style="stroke-width:1;fill:rgb(255,200,145);stroke:rgb(255,200,145)" filter="url(#f1)"/>
</svg>
The colour should look like this. The R channel should go from 255 to 0. G from 200 to 55. B from 145 to 110. Instead they get mapped to 0, 174, 220 respectively.
You need to set color-interpolation-filters="sRGB". Otherwise, the filter would use linearRGB.
"Linear" does not refer to the numbers used for encoding web colors, but linear chromaticities. CSS color encoding happens in the sRGB color space with non-linear chromaticity values. If the linearRGB color space is used, the filter computation would first convert the incoming sRGB values, then execute the color matrix operation, then convert back. This results in the non-obvious numbers you see.
Setting the filter execution to sRGB avoids that, but that is not to say one result is more "correct" than the other. It is just another interpretation of what is the opposite of a color.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="441" height="433">
<defs>
<filter id="f1" color-interpolation-filters="sRGB">
<feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="220.5" cy="86" r="30" style="stroke-width:1;fill:rgb(255,200,145);stroke:rgb(255,200,145)" filter="url(#f1)"/>
</svg>
I am trying to create an svg path to display moon phases.
The final result I am trying to achieve is something like this
http://ivantacca.altervista.org/arcs.jpg
I have already made the first two svgs but I dont know how to make the third one, in which the first arch seems to subtract the second one.
I supposed the first arc to have a negative value on the x axis.
Can someone help me?
<svg viewBox="0 0 200 200">
<path
d="
M 100, 100
m 0,-75
a 0.5,1 0 1,0 0,150
a 1,1 0 1,0 0,-150
"
/>
</svg>
<svg viewBox="0 0 200 200">
<path
d="
M 100, 100
m 0,-75
a 0,1 0 1,0 0,150
a 1,1 0 1,0 0,-150
"
/>
</svg>
Just set the sweep flag to 1 compared to the gibbous moon so the arc goes the other way.
<svg viewBox="0 0 200 200">
<path
d="
M 100, 25
a 0.5,1 0 1,1 0,150
a 1,1 0 1,0 0,-150
"
/>
</svg>
I'm implementing a real-time chromakey in order to transform green pixels displayed from the webcam in the webpage, into transparent pixels.
The SVG filter that I found seems pretty powerful but it's still quite unclear for me about how to use it.
The feMatrixColor filter from SVG:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix
I found this example https://codepen.io/iamschulz/pen/MmxdMQ that is close to what I'm trying to do.
I have to calibrate the color when my application loads, and to do so I need to generate the matching color matrix.
<feColorMatrix type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
1.5 -2 1.5 0 1" />
Above is an example where the alpha is set to zero for a defined green color. I don't use it as the perfect reference, but it works. Furthermore, I noticed that the last column do a lot in the rendering and I didn't get what's it's role. The quality of the final result varies a lot depending on this value.
I'd like to create a function which returns me a matrix with a picked color in the input but I don't understand the logic behind that matrix.
This is an example where I'm using an svg filter to remove the green. I've used this tool (where you can drag and drop an image) to get the right filter: https://codepen.io/enxaneta/full/ENRZGO
<svg viewBox="0 0 90 50">
<defs>
<filter id="f">
<feColorMatrix in="SourceGraphic"
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 0 1 -1 1 "></feColorMatrix>
</filter>
</defs>
<g filter="url(#f)">
<rect fill="red" width="30" height="50" />
<rect fill="green" x="30" width="30" height="50" />
<rect fill="blue" x="60" width="30" height="50" />
</g>
</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>