Add border to an svg - html

I have an SVG used as a divider and I was wondering if on the curve of the svg, I can add a blue or black border that follows the path of the curve.
<svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
</svg>


Sure - just draw a path with a stroke on top of the shape.
<svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
<path fill="none" stroke="grey" stroke-width="1px" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0"></path>
</svg>
You can also stroke the original path and use a stroke-dasharray of the appropriate construction to make the dash cover just the top of the shape. Or you can use a svg filter to add a border to the top edge. Just drawing the border explicitly is the most straightforward.


You can use the CSS filter property if you can't directly edit the SVG to add the path (which might be a better way to go).
svg path {
filter: drop-shadow(0 -2px 0 blue);
}
<svg class="curve" width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
</svg>

Related

how to mask an svg shape to an svg image

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>

Remove stroke from one side of SVG using stroke-dasharray

I am wondering is there a way have border (or stroke) all around except on the right side of the star (maybe using stroke-dasharray)?
SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="SvgDefinitions">
<defs>
<symbol id="HalfStar" viewBox="0 0 20 19">
<path d="M9,0.6L6.5,5.7L0.9,6.5c-0.2,0-0.4,0.1-0.6,0.3c-0.4,0.4-0.4,1,0,1.4l4.1,4l-1,5.6c0,0.2,0,0.4,0.1,0.6 c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l0,0V0C9.6,0,9.2,0.2,9,0.6z" />
</symbol>
</defs>
</svg>
<svg class="Star-Container">
<use href="#HalfStar" x-link:href="#HalfStar" />
</svg>
CSS:
#HalfStar {
stroke: red;
stroke-dasharray: 5,4;
}
CodePen: https://codepen.io/amir734jj/pen/zYqWZRN

The total length of the contour of half of the star measured with getTotalLength() is - 50px
The vertical bar length of the star is - 16px
For this segment, stroke-dasharray =" 0 16 " where 0 is the length of the stroke 16 is the length of the space
Therefore, the area of the star that should be filled with strokes is 34px
For 5 groups of strokes and spaces - 34/10 = 3,4px
As a result, the general formula will be:
stroke-dasharray="3.4,3.4 3.4,3.4 3.4,3.4 3.4,3.4 3.4,3.4 0, 16"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="SvgDefinitions">
<defs>
<symbol id="HalfStar" viewBox="0 0 20 19">
<path stroke="red" stroke-dashoffset="0"
stroke-dasharray="3.4,3.4 3.4,3.4 3.4,3.4 3.4,3.4 3.4,3.4 0, 16"
d="M9,0.6L6.5,5.7L0.9,6.5c-0.2,0-0.4,0.1-0.6,0.3c-0.4,0.4-0.4,1,0,1.4l4.1,4l-1,5.6c0,0.2,0,0.4,0.1,0.6 c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l0,0V0C9.6,0,9.2,0.2,9,0.6z" />
</symbol>
</defs>
</svg>
<svg class="Star-Container">
<use href="#HalfStar" x-link:href="#HalfStar" />
</svg>
#NodeJS by comment
Is there a way for the border to be continuous for the rest and not
dashed?
To do this, swap 0, 16 by 16, 0 in the last group of parameters stroke-dasharray
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="SvgDefinitions">
<defs>
<symbol id="HalfStar" viewBox="0 0 20 19">
<path stroke="red" stroke-dashoffset="3"
stroke-dasharray="3.4,3.4 3.4,3.4 3.4,3.4 3.4,3.4 3.4,3.4 16,0"
d="M9,0.6L6.5,5.7L0.9,6.5c-0.2,0-0.4,0.1-0.6,0.3c-0.4,0.4-0.4,1,0,1.4l4.1,4l-1,5.6c0,0.2,0,0.4,0.1,0.6 c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l0,0V0C9.6,0,9.2,0.2,9,0.6z" />
</symbol>
</defs>
</svg>
<svg class="Star-Container">
<use href="#HalfStar" x-link:href="#HalfStar" />
</svg>
#Apha by comment
Your solution doesn't have a continuous border on the left. It's
dashed. I think the OP wanted continuous border on the left and no
border on the right
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="SvgDefinitions">
<defs>
<symbol id="HalfStar" viewBox="0 0 20 19">
<path stroke="red" stroke-dashoffset="0.75"
stroke-dasharray="33.5,0 0,16.5"
d="M9,0.6L6.5,5.7L0.9,6.5c-0.2,0-0.4,0.1-0.6,0.3c-0.4,0.4-0.4,1,0,1.4l4.1,4l-1,5.6c0,0.2,0,0.4,0.1,0.6 c0.3,0.5,0.9,0.7,1.4,0.4l5.1-2.7l0,0V0C9.6,0,9.2,0.2,9,0.6z" />
</symbol>
</defs>
</svg>
<svg class="Star-Container">
<use href="#HalfStar" x-link:href="#HalfStar" />
</svg>

If I will use more number of SVG icons in web application, I couldn't use directly giving the code as below mentioned for every icons

If I will use more number of SVG Sprite icons in web application, it is very tough to use as below mentioned code for every icons. Is there any other easy ways to implement on web applications for more number of icons?
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.3px"
height="26.9px" viewBox="0 0 16.3 26.9" enable-background="new 0 0 16.3 26.9" xml:space="preserve">
<g id="bg">
</g>
<g id="ui">
<g>
<polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3 "/>
<polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8
3.8,26 4.6,21.3 1.1,18 6,17.3 "/>
</g>
</g>
<g id="pop_ups">
</g>
</svg>
Is there any other different ways to use more number of icons on web applications?

One way of doing it is giving your star an id and reuse it with a use element. In fact the first SVG, the one where you keep your code may be hidden.
svg{border:1px solid;}
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3"/>
</svg>
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<use fill="none" stroke="#000000" xlink:href="#star" y="5"/>
</svg>
In this case you may give your <use> element an x and/or an y attribute. This is allowing you to move the star where ever you need it.
An other option id putting the code for your icons in a <symbol> and reuse it exactly like before with the bonus that a <symbol> can have a viewBox attribute and this is allowing you to have it in different sizes. For this you may give your <use> element an width and/or a height attribute.
svg{border:1px solid;}
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<symbol>
<polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" viewBox="0 0 16.3 26.9"/>
</symbol>
<use fill="none" stroke="#000000" xlink:href="#star"/>
</svg>
<svg width="40" height="40" viewBox="0 0 16.3 26.9">
<use fill="none" stroke="#000000" xlink:href="#star" width="30" y="5" />
</svg>
Please note that is better to leave the main path (#star in this case) without a fill and a stroke. This way you can give your <use> element a stroke and a fill so you can get differently filled or stroked stars
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<symbol>
<polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" viewBox="0 0 16.3 26.9"/>
</symbol>
<use fill="skyBlue" stroke="#000000" xlink:href="#star"/>
</svg>
<svg width="40" height="40" viewBox="0 0 16.3 26.9">
<use fill="gold" stroke="#000000" xlink:href="#star" width="30" y="5" />
</svg>

If you're not going to access the inner parts of your SVG with code (ie to change the color with a CSS class, or animate them with JavaScript), then you can just use an img tag and set the SVG as the source like you would with any normal image. You still get a lot of the benefits that SVGs offer like perfect scaling, etc. For example:
<img src="yourIcon.svg">
Should work. Good luck!

SVG Transformation - Flip Horizontally

I need to flip this SVG horizontally - can't find anything online. Here it is:
<svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>
Any help appreciated, cheers!

You can just set a transform to flip things and then move the shape (as it's flipped about the origin).
<svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path transform="scale(1, -1) translate(0, -100)" d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>

If you can use CSS (this does not work when imported into Inkscape as of today), you can also use a CSS scale transform, which has the advantage that it is based on the element's center by default: transform: scale(-1,1);
<svg id="bigHalfCircle" style="display: block; transform: scale(-1,1)" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>

Overlay a svg with a transparent background pattern

Question
How can I overlay a transparent image pattern (PNG) over a SVG, while keeping the overlaid image pattern within the SVG's bounds, and keeping the SVG's fill visible?
Kind of like how in CSS you can define both background-color and backgroud-image.
Eg. background: red url(noise.png) top left repeat;
Image Example of what I am looking for
In this image, the balloon on the left is the SVG I currently have. What I'm trying to achieve is how the right balloon looks with noise applied to it.
Code Example:
Here's a code example of what I've tried so far:
FULL DEMO: http://staging.kassandrapoon.com/tests/svg/ (Sorry for the non-jsfiddle or code pen example. The background pattern wasn't loading cross domain)
SVG with my pattern attempt:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="143px" height="214px" viewBox="0 0 143 214" enable-background="new 0 0 143 214" xml:space="preserve">
<defs>
<!-- noise.png -->
<style type="text/css">
<![CDATA[
.filtered{
filter: url(#filter);
}
]]>
</style>
<filter id="filter" filterUnits="userSpaceOnUse">
<feImage xlink:href="noise.png" x="0" y="0" width="198" height="193" result="IMAGEFILL"/>
<feTile in="IMAGEFILL" result="TILEPATTERN"/>
<feComposite operator="in" in="TILEPATTERN" in2="SourceAlpha"/>
</filter>
</defs>
<g>
<g class="filtered">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#DE3F18" points="90.8,214 53.2,214 47.3,175.9 98.1,175.9 "/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#DE3F18" d="M143,72.6c0-39.5-32-71.7-71.5-71.7S0,33.2,0,72.7
C0,79.1,0.9,86,2.4,91.6c0,0,1.3,4.4,2,6.2C4.6,98.2,5,98.6,5.1,99c0.5,1.3,1.2,2.7,1.8,4c0.3,0.6,0.6,1.1,0.9,1.6
c0.6,1.1,1.2,2.3,1.8,3.4c0.3,0.6,0.7,1.1,1,1.7c0.7,1.1,1.3,2.1,2,3.1c0.4,0.5,0.8,1.1,1.1,1.6c0.7,1,1.5,2,2.3,3
c0.4,0.5,0.8,1,1.2,1.4c0.8,1,1.7,1.9,2.6,2.9c0.4,0.4,0.8,0.8,1.2,1.3c1,1,2,1.9,3,2.8c0.4,0.3,0.8,0.7,1.2,1
c0.3,0.2,0.5,0.5,0.8,0.7L46.4,158h2.8h44.5h2.8l20.3-30.6c0.3-0.2,0.5-0.5,0.8-0.7c0.4-0.3,0.8-0.7,1.2-1c1-0.9,2-1.8,3-2.8
c0.4-0.4,0.8-0.8,1.2-1.3c0.9-0.9,1.8-1.9,2.6-2.9c0.4-0.5,0.8-1,1.2-1.4c0.8-1,1.6-2,2.3-3c0.4-0.5,0.8-1,1.1-1.6
c0.7-1,1.4-2.1,2-3.1c0.3-0.6,0.7-1.1,1-1.7c0.6-1.1,1.2-2.2,1.8-3.4c0.3-0.6,0.6-1.1,0.9-1.7c0.6-1.3,1.2-2.6,1.7-4
c0.2-0.4,0.4-0.8,0.5-1.3c0.7-1.8,2.3-7,2.3-7S143,79,143,72.6z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#F9F9EF" d="M126.1,68.4c0-37.4-24.4-68.8-55.2-68.8h0.3h-0.3
C40-0.3,14.7,31.1,14.7,68.4c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,6,1.2,12.5,2.2,17.2c0.2,0.8,0.9,2.6,1.3,4.2c0.4,1,0.9,2,1.3,3.2
c0.3,1,0.8,1.9,1.1,2.9c0.4,0.8,0.7,1.5,1.1,2.4c0.5,1.1,0.9,2.1,1.3,3l0.9,1.8c0.5,1,1,2,1.6,2.9l0.9,1.5c0,0.1,0.1,0.1,0.1,0.2
c0.6,0.9,1.1,1.8,1.6,2.6c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0.3,0.5,0.6,0.9,1,1.4c0.7,0.9,29.4,46.8,29.4,46.8h25.7
c0,0,28.7-45.8,29.4-46.8c0.3-0.5,0.6-0.9,1-1.4c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0.5-0.8,1.1-1.6,1.6-2.6
c0-0.1,0.1-0.1,0.1-0.2l0.9-1.5c0.5-0.9,1-1.9,1.6-2.9l0.9-1.8c0.4-0.8,0.9-1.9,1.3-3c0.3-0.8,0.7-1.6,1-2.4
c0.4-0.9,0.8-1.9,1.1-2.9c0.4-1.2,0.8-2.2,1.2-3.2c0.4-1.6,0.2-3.3,0.4-4.2c1.1-4.6,1.1-11.2,1.1-17.2
C126.1,68.6,126.1,68.5,126.1,68.4C126.1,68.5,126.1,68.4,126.1,68.4z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#DE3F18" d="M91.9,57.1c0,43.5-21.6,101-21.6,101s-21.6-57.5-21.6-101
S58.9,0.7,70.4,0.7C79.1,0.7,91.9,13.6,91.9,57.1z"/>
<polyline fill="none" stroke="#FC611F" stroke-width="1.8927" stroke-miterlimit="10" points="47.9,175.9 27.8,130 70.6,130
115.2,130.1 96.5,175.9 "/>
<line fill="none" stroke="#FC611F" stroke-width="1.8927" stroke-miterlimit="10" x1="73.2" y1="175.9" x2="72.3" y2="130"/>
<g>
<polygon fill="#DE3F18" points="46.4,158 49.3,158 93.7,158 96.6,158 115.3,130 27.7,130 "/>
</g>
</g>
<g>
<g>
<path fill="#F9F9EF" d="M102.6,188.6c0,5.5-2.3,7.4-5.1,7.4c-2.8,0-5.1-1.9-5.1-7.4s5.1-12.6,5.1-12.6S102.6,183,102.6,188.6z"/>
<path fill="#F9F9EF" d="M77.6,188.6c0,5.5-2.3,7.4-5.1,7.4c-2.8,0-5.1-1.9-5.1-7.4s5.1-12.6,5.1-12.6S77.6,183,77.6,188.6z"/>
<path fill="#F9F9EF" d="M52.6,188.6c0,5.5-2.3,7.4-5.1,7.4c-2.8,0-5.1-1.9-5.1-7.4s5.1-12.6,5.1-12.6S52.6,183,52.6,188.6z"/>
</g>
</g>
</g>
</svg>
I've tried defining a pattern in the SVG like here, but that replaces the existing fill color which I want to keep.