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?
Related
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
I been struggling for hours to solve this, I'm trying to draw elliptical arc to fill up the spaces circled in red, can I have some sample code for it?
EDIT:
Since shape is generated using JavaScript, I will add SVG Elements generated from browser:
<svg width="500" height="500" style="background-color: white; padding: 0px 10px; user-select: none;" id="chart">
<path d="M 375,300 a 1 1 0 0 0 -300 0" stroke="lightgray" fill="lightgray"></path>
<path id="__currentVal__" d="M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212 " stroke="skyblue" fill="skyblue"></path>
</svg>
The blue shape will be the element with id __currentVal__, the elliptical arc command will inserted at end of command M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212
The expected output will be like this (edited using MS Paint):
This is the d attribute you are using: d="M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212 "
M 75,300 means that you are moving to the point x:75, y:300.
Since you are using lower case commands those are relative commands. For instance l 150,0 means that you are moving 150 units in x from 75 to 225. The y doesn't change meaning that the y:300. The center of the arc is in this point: x:225,y:300.
This part of the command is also letting me know that the radius of the arc is 150.
Next the path (l -106.06601717798213,-106.06601717798212) goes from the previous point x:225 y:300 to the point x:225-106.06601717798213 = 118.93398282201787, y:300-106.06601717798212 = 193.93398282201787
I'm drawing a small circle to visualise this point (x:118.93398282201, y:193.93398282201787 ). The arc will start here. Also I'm drawing another small circle in the point x:75,y:300. The arc will end here. Now I can draw the arc: M118.93398282201,193.93398282201787 A 150,150 0 0 0 75,300
<svg viewBox="0 0 500 500" style="background-color: white; padding: 0px 10px; user-select: none;" id="chart">
<path d="M 375,300 a 150 150 0 0 0 -300 0" stroke="lightgray" fill="lightgray"></path>
<path id="__currentVal__"d="M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212 " stroke="skyblue" fill="none" ></path>
<circle cx="75" cy="300" r="5"/>
<circle cx="118.93398282201" cy="193.93398282201787" r="5"/>
<path d="M118.93398282201,193.93398282201787A150,150 0 0 0 75,300" />
</svg>
If you happen to need to draw the arc in the same path as the actual blue triangle you can do this: you start your path with the arc, then you use the d attribute of your path without the first (move to) command. You don't need to move to this point since you are already there (the arc is ending in this point)
<svg viewBox="0 0 500 500" style="background-color: white; padding: 0px 10px; user-select: none;" id="chart">
<path d="M 375,300 a 150 150 0 0 0 -300 0" stroke="lightgray" fill="lightgray"></path>
<circle cx="75" cy="300" r="5"/>
<circle cx="118.93398282201" cy="193.93398282201787" r="5"/>
<path d="M118.93398282201,193.93398282201787A150,150 0 0 0 75,300
l 150,0 l -106.06601717798213,-106.06601717798212 " stroke="skyblue" fill="none" />
</svg>
You can remove those 2 small circles I've drawn as helpers to let me visualise the points of your path.
SVG with visibility set to hidden but its children set to visible not loading in Safari. All other Chrome, Firefox, and IE are ok.
sample here
svg {
width: 100px;
border: 1px solid green
}
svg:hover {
opacity: 0.5
}
.c {
visibility:hidden}
.c * {
visibility: visible;
}
<p>Need to create grid with 6 sided shape. Each shape needs a hover state and said hover state needs to be happen on the shape not the bounding box of the element.</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 279 322.16">
<title>
svg1
</title>
<g>
<path d="M0 80.54 0 241.62 139.5 322.16 279 241.62 279 80.54 139.5 0 0 80.54z" class="cls-1" />
</g>
</svg>
<br /><br />
<p>One way to achieve this is to have the SVG element Visibility set to hidden but then make the children of the SVG visible. </p>
<p style="color: red"> The problem i have is that in Safari, the SVG disapears. Have tried adding visibility=visible to each of the elements in the SVG and still safari won't show them. Any help on this would be much appeciated.</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 279 322.16" class="c">
<title>
svg2
</title>
<g>
<path d="M0 80.54 0 241.62 139.5 322.16 279 241.62 279 80.54 139.5 0 0 80.54z" class="cls-1" />
</g>
</svg>
For me helps to replace visibility: hidden/visible to opacity: 0 / 1.
Can someone help identify the problem here. Consider this SVG markup.
<svg id="paper" version="1.1" viewBox="0 0 474.00001 477.99998" style="position: relative; opacity: 1;">
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Configurateur Predesire</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"/>
<defs>
<filter id="f1" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix result="original" id="c1" type="matrix" values="0.6 0 0 0 0 1 0.2 0 0 0 0 -0.2 0.1 0 0 -0.2 -0.4 -0.1 1 0"/>
</filter>
</defs>
<image x="0" y="0" width="474.00001" height="477.99998" filter="url('#f1')" id="svg_1" xlink:href="http://25.media.tumblr.com/8b045d92c3ef2f903cb8fd6a3801e26a/tumblr_mtl5yfKajA1spwwv4o1_500.jpg"/>
</svg>
When I try to convert this svg to png via GraphicsMagick:
convert item.svg item.png
Filters are not applied. However, If I use any other svg (generated by Inkscape/AI etc..) it converts successfully.
I think that GraphicsMagick does not support filter in 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>