My svg icons
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Warstwa_1" data-name="Warstwa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181.44 71.99">
<rect x="1.6" y=".5" width="179.34" height="16.7" rx="8.35" ry="8.35" style="fill: #1d1d1b; stroke: #1d1d1b; stroke-miterlimit: 10;"/>
<rect x=".5" y="28.63" width="179.34" height="16.7" rx="8.35" ry="8.35" style="fill: #1d1d1b; stroke: #1d1d1b; stroke-miterlimit: 10;"/>
<rect x=".5" y="54.79" width="179.34" height="16.7" rx="8.35" ry="8.35" style="fill: #1d1d1b; stroke: #1d1d1b; stroke-miterlimit: 10;"/>
</svg>
Boostrap svg icons
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-1-square-fill" viewBox="0 0 16 16">
<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Zm7.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383h1.312Z"/>
</svg>
Question: how to export icons like in boostrap (single element) not like me (separated elements)
I use patch: file > export as.. > svg format
Related
I'm trying to get an arrow marker to display at the end of a line, but for some reason, this doesn't work in any browser I have or any graphics viewer or editor, except for Inkscape.
Can anyone tell me what I'm doing wrong?
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500" width="500" height="500"
style="stroke: rgb(0, 0, 0); fill: none; stroke-linecap: round; stroke-linejoin: round;">
<defs>
<marker id="arrow" refX="-2.33" refY="0" orient="auto">
<path d="m 0,0 -5,2 q 1.5,-2 0,-4 z"
style="fill: rgb(0, 0, 0); stroke-width: 1;"
transform="scale(0.6667 0.6667)" />
</marker>
</defs>
<g transform="translate(20 20)">
<path d="m 0,0 100,0" style="stroke-width: 3; marker-end: url(#arrow);" />
</g>
</svg>
Update
The right viewBox (without scaling the path inside the marker) is "-5.5 -2.5 6 5". The 4 parameters of the viewBox are min-x, min-y, width, and height. They have to take into account whatever stroke-width the marker's elements may have, hence the extra 0.5 that I needed on either side.
Turns out, markerHeight and markerWidth are important to set, because the default value for both is 3. That's why the arrow was coming out too small in my earlier attempt. For 1-to-1 scaling, they should be the same as the last two numbers in the viewBox.
All of the viewBox, markerHeight, and markerWidth need to be adjusted accordingly when scaling elements inside the marker.
Here's a complete solution based on the answer and the comments for posterity:
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 30 10" width="300" height="100"
style="stroke: #000000; fill: none; stroke-linecap: round; stroke-linejoin: round;">
<defs>
<marker id="arrow" refX="-1.333" refY="0"
orient="auto" markerUnits="strokeWidth"
viewBox="-3.667 -1.667 4 3.333"
markerWidth="4" markerHeight="3.333"
>
<path d="m 0,0 -5,2 q 1.5,-2 0,-4 z"
style="fill: #000000; stroke-width: 1;"
transform="scale(0.667)"
/>
</marker>
</defs>
<g transform="translate(5 5)">
<path d="m 0,0 10,0" style="stroke-width: 1.5; marker-end: url(#arrow);" />
</g>
<g transform="translate(25 5)">
<path d="m 0,0 -5,2 q 1.5,-2 0,-4 z"
style="fill: rgb(0, 0, 0); stroke-width: 1;" />
</g>
</svg>
The simplest thing is probably to add a viewBox to the marker so the shape is actually drawn in the marker canvas and not outside it.
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500" width="500" height="500"
style="stroke: rgb(0, 0, 0); fill: none; stroke-linecap: round; stroke-linejoin: round;">
<defs>
<marker id="arrow" refX="-2.33" refY="0" orient="auto" viewBox="-3 -3 5 5">
<path d="m 0,0 -5,2 q 1.5,-2 0,-4 z"
style="fill: rgb(0, 0, 0); stroke-width: 1;"
transform="scale(0.6667 0.6667)" />
</marker>
</defs>
<g transform="translate(20 20)">
<path d="m 0,0 100,0" style="stroke-width: 3; marker-end: url(#arrow);" />
</g>
</svg>
This SVG is intended to appear in a 30x30 square, and I've gotten it to look right in this code pen:
https://codepen.io/pgblu/pen/RwrYXXm
HTML
<span class="foo">
<svg height="30" width="30" viewBox="0 0 450 450">
<g
id="layer1"
transform="translate(-2887.5916,-192.36151)"
>
<g transform="matrix(1.3580428, 0, 0, 1.3580428, 2065.078, 44.928302)" id="layer2" />
<path
transform="matrix(1.1703715, 0, 0, 1.1703715, 1772.3948, -189.9379)"
d="M 1338.5714, 519.50507 A 192.85715, 192.85715 0 0 1 1145.7142, 712.36221 192.85715, 192.85715 0 0 1 952.85709, 519.50507 192.85715, 192.85715 0 0 1 1145.7142, 326.64792 192.85715, 192.85715 0 0 1 1338.5714, 519.50507 Z"
id="redCircle001"
style="fill:#dd0e00;fill-opacity:1;fill-rule:nonzero;stroke:none"
/>
<g transform="matrix(-3.1435529, 0, 0, -3.1435529, 10926.161, -138.49162)">
<path
style="fill:#ffffff"
d="m2494.1163, -202.23709 l4, 84.92415 l-25.67715, 0 l4, -84.92415 z"
id="whiteBeam001"
/>
<circle
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="whiteDot001"
transform="matrix(0.3181114, 0, 0, 0.3181114, 2440.9065, -251.44719)"
cx="139.73659"
cy="101.28652"
r="36.22654"
/>
</g>
</g>
</svg>
</span>
CSS:
.foo {
border: 1px solid #ffaa22;
height: 30px;
width: 30px;
}
...but I had to trial-and-error the viewBox directive and ended up with "0 0 450 450". I am clearly doing this wrong. Shouldn't the viewBox correspond to the target size, i.e., "0 0 30 30"? Is there something in the SVG code itself that is making the resizing counterintuitive?
source: https://codepen.io/junior/pen/RWQver
As in the following demo:
.completion {
stroke-dasharray: 1000;
animation: dash 3s linear alternate infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="76px" height="68px" viewBox="0 0 76 68" enable-background="new 0 0 76 68" xml:space="preserve">
<g>
<text transform="matrix(1 0 0 1 22.9209 43.4141)" fill="#2EA2DC" font-family="'SFUIText-Bold'" font-size="18">45%</text>
</g>
<path fill="none" stroke="#222729" stroke-width="2" stroke-miterlimit="10" d="M16.652,65.29
C8.984,58.838,4.112,49.171,4.112,38.366c0-19.424,15.746-35.171,35.17-35.171c19.424,0,35.17,15.747,35.17,35.171
c0,10.805-4.872,20.473-12.54,26.924"/>
<path class="completion" fill="none" stroke="#2EA2DC" stroke-width="5" stroke-miterlimit="10" d="M17.107,65.29
C9.44,58.838,4.567,49.171,4.567,38.366C4.567,20.6,17.74,5.911,34.852,3.532"/>
<text transform="matrix(1 0 0 1 21.3916 51.7891)" fill="#222729" font-family="'SFUIText-Light'" font-size="8">completion</text>
</svg>
It could have been made by accident or there have been more elements before. The 'G' element in SVG is used to group items together. In this case you can remove the item without breaking stuff.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
I would like to flip this SVG Path horizontally so that the curved arc is facing down. Any help would be greatly appreciated in adjusting the coordinates...
Here is what I got so far:
<style>
.circular path {
fill: #3498db;
stroke: #3498db;
}
</style>
<svg class="circular border_blue" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="80" viewBox="0 0 100 80" preserveAspectRatio="none">
<path d="M0 100 C40 0 60 0 100 100 Z">
</path>
</svg>
So I can make the following path, but I need the shape flipped so that the flat joining line (X) is on the bottom. I also need it to stretch the full width of its container.
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L30 50 L100 0 Z"></path>
</svg>
With respect to flipping the shape, you can use a transform on the path, scaling the y-axis by -1. This will flip the shape up and "out" of view, so you also need to translate it down. If you want it to end up with exactly the same upper and lower boundaries as pre-flipped (as opposed to, say, at the bottom of its container, etc.) then you have to translate it down by the height of the shape, i.e. 50px in your example.
With respect to wanting it stretched to the full width of its container, the code in your question already contains the answer, i.e. width="100%". This is shown by placing the triangle into a div that is 250px wide. Contrast this with the original shape (on the left) with width of 100 not 100%.
div {
width: 250px;
height: 70px;
border: solid red 2px;
}
original: unflipped, untranslated, unstretched:
<div>
<svg id="bigTriangleColor2" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 0) scale(1, 1)" d="M0 0 L30 50 L100 0 Z"></path>
</svg>
</div>
altered: flipped, translated, stretched:
<div>
<svg id="bigTriangleColor1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 50) scale(1, -1)" d="M0 0 L30 50 L100 0 Z"></path>
</svg>
</div>