I'd like to create rounder corners for my svg path but I can't make it work.
Is there a good way to accomplish this? here is my code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<clipPath id="svgClip">
<path id="svgPath" d="M3,474 L957,471 942,24 40,1 z" />
</clipPath>
<path id="svgMask" d="M3,474 L957,471 942,24 40,1 z" />
</svg>
Thanks!
You can use stroke-linejoin="round" and pick a suitable stroke-width.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="-100 -100 1200 1000">
<path id="svgMask" d="M3,474 L957,471 942,24 40,1 z" stroke-linejoin="round" stroke="black" stroke-width="80"/>
</svg>
This may depend on compatibility but stroke-linecap works in Chromium browsers.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<clipPath id="svgClip">
<path id="svgPath" d="M3,474 L957,471 942,24 40,1 z" stroke-linecap="round"/>
</clipPath>
<path id="svgMask" d="M3,474 L957,471 942,24 40,1 z" stroke-linecap="round"/>
</svg>
There is no automatic or easy way to do this for paths. You can supply an r (radius) attribute to<rect> elements, but there is no equivalent for <path>.
You would need to calculate and add cubic bezier path commands (C or c) at the appropriate places in your path.
Related
So basically I have a triangular shape and I want to mask it in an image/gif.
<svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
</svg>
<div class="clipSvg2">
<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask11">
<!-- <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
</svg>
-->
</mask>
</defs>
//Here add some mask=url(#mask11)
<image
width="100%" height="100%" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"></image>
</svg>
</div>
As you see I'm trying to mask the mask11 in my image but I can't do that..I've search a lot here and its not really working I don't know how or what to do about it can anyone help me? Thanks a lot.
I'm not sure what it should look like, but here are two examples. The first uses a clip-path. With the clip-rule="evenodd" it is only the "frame" that shows.
The second is a mask. In the mask the path has a white fill – that is what makes the image show.
In both cases I made the viewBox the same aspect ratio as the image to make the image take up the entire space of the SVG.
<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="cp1">
<path clip-rule="evenodd"
d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" />
</clipPath>
</defs>
<image width="100%" height="100%"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
clip-path="url(#cp1)"/>
</svg>
<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="m1">
<path d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z"
fill="white"/>
</mask>
</defs>
<image width="100%" height="100%"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
mask="url(#m1)"/>
</svg>
The SVG code of Material design Hamburger menu icon:
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
</svg>
However it always could be some reason I can not use the Material Design icon and need to create my own one. But how I can reach such simple code? One path.
Tried to draw the similar icon in AbodeXD. The output SVG code was:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="18" viewBox="0 0 26 18">
<defs>
<clipPath id="clip-アートボード_1">
<rect width="26" height="18"/>
</clipPath>
</defs>
<g id="アートボード_1" data-name="アートボード – 1" clip-path="url(#clip-アートボード_1)">
<line id="線_1" data-name="線 1" x2="26" transform="translate(0 0.5)" fill="none" stroke="#000" stroke-width="1"/>
<line id="線_2" data-name="線 2" x2="26" transform="translate(0 17.5)" fill="none" stroke="#000" stroke-width="1"/>
<line id="線_3" data-name="線 3" x2="26" transform="translate(0 9)" fill="none" stroke="#000" stroke-width="1"/>
</g>
</svg>
The SVG optimization reduced above code to:
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="18">
<defs>
<clipPath id="a">
<path d="M0 0h26v18H0z"/>
</clipPath>
</defs>
<g data-name="アートボード – 1" clip-path="url(#a)" fill="none" stroke="#000">
<path data-name="線 1" d="M0 .5h26"/>
<path data-name="線 2" d="M0 17.5h26"/>
<path data-name="線 3" d="M0 9h26"/>
</g>
</svg>
But it a more complicated than Material Design SVG. Also, we can't change the icon color by like fill: red as many other icons.
Path syntax is easy to understand - let's break it down:
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
M3,6 - Move the drawing point to coordinates [3,6]
H21 - draw a Horizontal line to coordinates [21,Current Y Coordinate (6)]
V8 - draw a Vertical line to coordinates [Current X Coordinate (21), 8]
H3 - draw a Horizontal line to coordinates [3,Current Y Coordinate (8)]
V6 - etc.
M3,11 - Move the drawing point to coordinates [3,11]
... etc
Z - Draw a line to the start of the current subpath (the coordinates of the last MoveTo - which in this case, doesn't do anything, because we're already at those coordinates)
So if you want the hamburger menu to be in a smaller viewBox, you can edit the path by hand like so:
<svg style="width:20px;height:20px" viewBox="0 0 20 20">
<path fill="currentColor" d="M1,4 H18 V6 H1 V4 M1,9 H18 V11 H1 V7 M3,14 H18 V16 H1 V14" />
</svg>
Please Use stroke="red" rather than using Fill="red"
Please find the Below updated code:
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="18">
<defs>
<clipPath id="a">
<path d="M0 0h26v18H0z"/>
</clipPath>
</defs>
<g data-name="アートボード – 1" clip-path="url(#a)" fill="none" stroke="red">
<path data-name="線 1" d="M0 .5h26"/>
<path data-name="線 2" d="M0 17.5h26"/>
<path data-name="線 3" d="M0 9h26"/>
</g>
</svg>
This is my first attempt at creating .svg images. I created an isometric view of a plate, but I noticed that when the image scales up, the lines do not intersect cleanly - they overlap (see image).
What am I doing wrong here?
<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="greyGrad" gradientUnits="userSpaceOnUse">
<stop stop-color="#ddd" offset="0%"/>
<stop stop-color="#999" offset="85%"/>
</linearGradient>
</defs>
<g>
<polygon stroke="#333" points="0,0 8,14 11,14 3,0" fill="url(#greyGrad)"/>
<polygon stroke="#333" points="8,14 11,14 11,58 8,58" fill="url(#greyGrad)"/>
<polygon stroke="#333" points="0,0 8,14 8,58 0,45" fill="url(#greyGrad)"/>
</g>
</svg>
The problem is that mitred corners tend to stick out a long way at acute angles. The easy fix is to add stroke-linejoin="round" to your path elements, which will round them all off with the same radius.
But if you want sharp corners, you'll get better results if you draw the paths and fills separately, with the angles in the paths as large as possible. Here's an example. If you hover over the strokes, you should be able to see what's going on:
path:hover { stroke:#888; }
<!-- Cube consisting of three filled quads -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="180" viewBox="0 0 40 36">
<g stroke="#000" stroke-width="4">
<path d="M2,9 26,9 26,33 2,33Z" fill="orange"/>
<path d="M26,9 38,3 38,27 26,33Z" fill="red"/>
<path d="M2,9 14,3 38,3 26,9Z" fill="yellow"/>
</g>
</svg>
<!-- Cube with separate strokes and fills -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="180" viewBox="0 0 40 36">
<!-- Fills (no stroke) -->
<g stroke="none">
<path d="M2,9 26,9 26,33 2,33Z" fill="orange"/>
<path d="M26,9 38,3 38,27 26,33Z" fill="red"/>
<path d="M2,9 14,3 38,3 26,9Z" fill="yellow"/>
</g>
<!-- Strokes (outline first, then interior lines -->
<g fill="none" stroke="#000" stroke-width="4">
<path d="M2,9 14,3 38,3 38,27 26,33 2,33Z"/>
<path d="M2,9 26,9 38,3M26,9 26,33"/>
</g>
</svg>
I am trying to create tick Inside filled circle.
I did following but, doesn't looks perfect.
<svg height=10 viewBox="0 0 10 10" width=10>
<g fill="none" stroke="#22AE73" stroke-width="1"></g>
<circle cx=5 cy=5 fill='#29AB87' r=5 />
<polyline stroke="#ffffff" stroke-width="2" points="2.5,5.8 4.7,7.9 9.2,2.4 " />
</svg>
Any help would be greatly appreciated.
Your points are reaching the 10 10 part of your viewbox, hence it doesn't fit. You could change your points to lower values.
Alternatively, here's an svg that might work for you that is path based
<svg width="10px" height="10px" viewBox="0 0 10 10" >
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="tick">
<circle id="Oval" fill="#349006" cx="5" cy="5" r="5"></circle>
<path d="M7.26241838,2.25 L8.35843389,3.34601551 L3.9390165,7.76543289 L3.937,7.763 L3.93041937,7.77093389 L1.65,5.49051452 L2.74601551,4.39449901 L3.932,5.58 L7.26241838,2.25 Z" id="Combined-Shape" fill="#FFFFFF"></path>
</g>
</g>
</svg>
This arrow renders just fine when you save it as arrow.html and open it in a modern browser. (Edge, Firefox, Chrome).
<!DOCTYPE html>
<svg
width="490" height="385"
viewBox="0 0 490 385">
<defs>
<marker id="arrow-b" markerWidth="10" markerHeight="10" refx="3" refy="2" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,4 L6,2 z" fill="#000" />
</marker>
<marker id="arrow-a" markerWidth="10" markerHeight="10" refx="3" refy="2" orient="auto" markerUnits="strokeWidth">
<path d="M0,2 L6,0 L6,4 z" fill="#000" />
</marker>
</defs>
<line x1="10" y1="10" x2="480" y2="370" stroke="#000" stroke-width="2" marker-end="url(#arrow-b)" marker-start="url(#arrow-a)" />
</svg>
But having that inline in an HTML file makes it hard to reuse, so I saved the following into arrow.svg and opened that in my browser, and it looks wrong:
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="490" height="385"
viewBox="0 0 490 385">
<defs>
<marker id="arrow-b" markerWidth="10" markerHeight="10" refx="3" refy="2" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,4 L6,2 z" fill="#000" />
</marker>
<marker id="arrow-a" markerWidth="10" markerHeight="10" refx="3" refy="2" orient="auto" markerUnits="strokeWidth">
<path d="M0,2 L6,0 L6,4 z" fill="#000" />
</marker>
</defs>
<line x1="10" y1="10" x2="480" y2="370" stroke="#000" stroke-width="2" marker-end="url(#arrow-b)" marker-start="url(#arrow-a)" />
</svg>
What's interesting is that it looks wrong in Firefox, Chrome and Edge. So, maybe I'm doing something wrong? Does anybody know what I'm doing wrong?
standalone SVG is XML based which is case sensitive.
HTML is not case sensitive and when you embed SVG in HTML the HTML parser tries to fix up any case sensitivity issues for you.
You have the marker refX and refY attributes entirely in lower case which is invalid and causes them to be ignored in a standalone file.