Intent is to scale svg image without using any css and image needs to be rendered in center of bounding box.
But when i changed width and height it only changes bounding box, In code pen i want image to be in center of red bounding box without any css. Thanks in advance.
https://codepen.io/rosn/pen/dybjVNX
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.917 11.019c0-.507-.41-.918-.916-.918s-.917.411-.917.918c0 .507.411.918.917.918s.916-.411.916-.918m1.751 0c0 1.473-1.196 2.671-2.667 2.671-1.47 0-2.667-1.198-2.667-2.671 0-1.473 1.197-2.671 2.667-2.671 1.471 0 2.667 1.198 2.667 2.671m5.125-2.679c-.827-2.397-2.722-4.29-5.117-5.113l-.118.936c1.981.741 3.553 2.313 4.299 4.293l.936-.116zm-1.858.232c-.652-1.58-1.913-2.843-3.491-3.494l-.12.955c1.166.548 2.109 1.491 2.656 2.659l.955-.12zm-2.267 2.447c0-2.028-1.643-3.673-3.667-3.673-2.025 0-3.667 1.645-3.667 3.673s1.642 3.673 3.667 3.673c2.024 0 3.667-1.645 3.667-3.673m-5.991 4.987c-1.166-.549-2.107-1.492-2.654-2.66l-.954.119c.65 1.582 1.911 2.844 3.49 3.496l.118-.955zm-.238 1.906c-1.989-.747-3.569-2.332-4.308-4.329l-.935.118c.822 2.412 2.721 4.318 5.126 5.147l.117-.936zm13.561-6.893c0 .264-.022.521-.04.78-.132-.033-.457-.114-.894-.021-.295-.486-.85-.799-1.503-.799-.685 0-1.27.351-1.548.885-.946-.17-2.098.418-2.098 1.593v2.761c-.687-.72-2.916-.376-2.916 1.41 0 .275.062.549.185.82.066.158 1.393 2.805 1.467 2.955-1.144.404-2.37.635-3.652.635-6.075 0-11.001-4.933-11.001-11.019 0-6.085 4.926-11.019 11-11.019s11 4.934 11 11.019m-6.302 6.286c.007.01.757 1.39.872 1.607.124.228.494.179.494-.12v-5.335c0-.839 1.348-.814 1.348 0v4.311c0 .234.453.23.453 0l.002-5.131c0-.441.355-.656.714-.656.363 0 .729.221.729.656v5.072c0 .235.437.244.437.006v-4.323c0-.862 1.475-.886 1.475 0v4.579c0 .233.472.234.472 0v-2.849c0-.778 1.304-.822 1.304.039l.002 6.499c0 1.489-.831 2.34-2.406 2.34h-2.935c-1.497 0-2.022-.846-2.438-1.696-.395-.808-2.001-3.976-2.125-4.272-.066-.144-.095-.28-.095-.404 0-.809 1.276-1.128 1.697-.323"/></svg>
use viewBox you can also check this link
svg{
border: 1px solid red
}
<svg align="center" width="100" height="100" viewBox="-50 -50 125 125" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.917 11.019c0-.507-.41-.918-.916-.918s-.917.411-.917.918c0 .507.411.918.917.918s.916-.411.916-.918m1.751 0c0 1.473-1.196 2.671-2.667 2.671-1.47 0-2.667-1.198-2.667-2.671 0-1.473 1.197-2.671 2.667-2.671 1.471 0 2.667 1.198 2.667 2.671m5.125-2.679c-.827-2.397-2.722-4.29-5.117-5.113l-.118.936c1.981.741 3.553 2.313 4.299 4.293l.936-.116zm-1.858.232c-.652-1.58-1.913-2.843-3.491-3.494l-.12.955c1.166.548 2.109 1.491 2.656 2.659l.955-.12zm-2.267 2.447c0-2.028-1.643-3.673-3.667-3.673-2.025 0-3.667 1.645-3.667 3.673s1.642 3.673 3.667 3.673c2.024 0 3.667-1.645 3.667-3.673m-5.991 4.987c-1.166-.549-2.107-1.492-2.654-2.66l-.954.119c.65 1.582 1.911 2.844 3.49 3.496l.118-.955zm-.238 1.906c-1.989-.747-3.569-2.332-4.308-4.329l-.935.118c.822 2.412 2.721 4.318 5.126 5.147l.117-.936zm13.561-6.893c0 .264-.022.521-.04.78-.132-.033-.457-.114-.894-.021-.295-.486-.85-.799-1.503-.799-.685 0-1.27.351-1.548.885-.946-.17-2.098.418-2.098 1.593v2.761c-.687-.72-2.916-.376-2.916 1.41 0 .275.062.549.185.82.066.158 1.393 2.805 1.467 2.955-1.144.404-2.37.635-3.652.635-6.075 0-11.001-4.933-11.001-11.019 0-6.085 4.926-11.019 11-11.019s11 4.934 11 11.019m-6.302 6.286c.007.01.757 1.39.872 1.607.124.228.494.179.494-.12v-5.335c0-.839 1.348-.814 1.348 0v4.311c0 .234.453.23.453 0l.002-5.131c0-.441.355-.656.714-.656.363 0 .729.221.729.656v5.072c0 .235.437.244.437.006v-4.323c0-.862 1.475-.886 1.475 0v4.579c0 .233.472.234.472 0v-2.849c0-.778 1.304-.822 1.304.039l.002 6.499c0 1.489-.831 2.34-2.406 2.34h-2.935c-1.497 0-2.022-.846-2.438-1.696-.395-.808-2.001-3.976-2.125-4.272-.066-.144-.095-.28-.095-.404 0-.809 1.276-1.128 1.697-.323"/></svg>
Related
I'm looking to change position of a few created SVG shapes with CSS. I've had no trouble positioning them from the beginning, and I've been able to re-position other objects like rectangles and circles with CSS. But I can't figure out how to do it with a path. I've done searches both here and through Google search for several hours, but haven't found any usable clues. I'm beginning to suspect that there is something about SVG paths I haven't understood fully yet, but at the same time I can't help but think that it might just be down to me not understanding the correct syntax in CSS.
Below is an SVG elliptical arc path I've created. I'd like to move it anywhere within view (so I can spot the difference and work from there). Can someone tell me if I'm lacking some knowledge about how paths work (contrary to how rectangles work in this regard), or if I just need the proper syntax in CSS?
Please note: I do NOT want to animate it in any way, just move it to a new position if possible.
<svg xmlns="http://www.w3.org/2000/svg">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue" stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
You can move the path using transform/translate either as a CSS property (first example) or as an attribute (second example).
I also added the viewBox attribute to the SVG element -- then it's easier to see where you place the path in the SVG.
svg {
background: orange;
}
path {
transform: translate(10px, 10px);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
svg {
background: orange;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5" transform="translate(10 10)" />
</svg>
The capital A in your path M 0 0 A 50 37.5 0 0 1 50 0 makes it Arc at an absolute position
If you convert that whole path to use a relative a position: M0 0 a 50 37.5 0 0 1 50 0
(use https://yqnn.github.io/svg-path-editor/# for more complex paths)
You can use the first M x y notation to position the path anywhere in the viewBox
<style>
svg { background:hotpink; height:50px }
path { fill:lightblue; stroke:blue }
</style>
<svg viewBox="0 0 55 10">
<path d="M 0 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 14 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 9 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 12 a 50 37.5 0 0 1 50 0" />
</svg>
I finally got on track with 'offset-path', and with some tinkering I managed to understand enough about how it works to move the path to a new position:
offset-path: path("M237.5 50");
I am trying to add a text inside svg path i copy from figma.
Here is how it's look in figma:
Here is my code base:
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<text>hello</text>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
</svg>
The main thing is to swap the order of the path and text elements so the text element is drawn on top of the path. After that you just need to position the text where you want it and ensure it has a fill colour so you can see it.
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
<text y="43" x="61" fill="white">hello</text>
</svg>
I'd like to use an icon from bootstrap, but I need it flipped vertically:
https://icons.getbootstrap.com/icons/arrow-left-right/
What I'd rather need is a arrow-right-left, so that the upper arrow points to the right.
I tried to transform with transform="scale(-1 1) translate(-1260 0)", but that did not work:
https://jsfiddle.net/j63zpwqr/
So how could I flip a path on the Y-axis?
I changed path info from 3 paths into 1 because Bootstrap icons are bloated,
using https://yqnn.github.io/svg-path-editor/
That also changed the SVG from Absolute positioning to Relative
a transform="scale(-1 1) flips the image
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" fill="red"
class="bi bi-arrow-left-right"
viewBox="0 0 16 16"
transform="scale(-1 1)">
<path d="m10.15 7.65a.5.5 0 01.71 0l3 3a.5.5 0 010 .71l-3 3a.5.5 0 01-.71-.71l2.65-2.65l-2.65-2.65a.5.5 0 010-.71zm-8.15 3.35a.5.5 0 01.5-.5h10.5a.5.5 0 010 1h-10.5a.5.5 0 01-.5-.5zm3.85-9.35a.5.5 0 010 .71l-2.65 2.65l2.65 2.65a.5.5 0 11-.71.71l-3-3a.5.5 0 010-.71l3-3a.5.5 0 01.71 0zm-3.35 3.35a.5.5 0 01.5-.5h10.5a.5.5 0 010 1h-10.5a.5.5 0 01-.5-.5z" />
</svg>
Does anyone know why this social icon in SVG format has slight curved radius border? I'd like a square icon. How do I edit this to be a square? Using CSS or just edit the actual code in the SVG? Thanks
<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><rect height="512" rx="64" ry="64" width="512" fill="#0083be"/><g fill="#fff"><path d="M61.05316483 178.66808913h85.76013915v257.9625333H61.05316483zM104.5127998 54.28063176c-29.34185723 0-48.512575 19.29035996-48.512575 44.5737057 0 24.75194797 18.5880448 44.57370568 47.37675114 44.57370568h.55470467c29.9027771 0 48.5156826-19.8217577 48.5156826-44.5737057-.55470467-25.28334572-18.6113517-44.57370568-47.9345634-44.57370568zM357.27944394 172.60209055c-45.4904445 0-65.8669069 25.01764686-77.27642064 42.58951v-36.52349588h-85.73838603c1.13737765 24.1972433 0 257.9625333 0 257.9625333h85.73683224V292.56591023c0-7.7114826.55470468-15.4198576 2.82790618-20.93116706 6.1872101-15.39965828 20.30498783-31.35246744 43.9925865-31.35246744 31.01218643 0 43.43632805 23.66429176 43.43632805 58.3278955v138.02046672h85.74149362v-147.9305687c0-79.2373094-42.30516557-116.0979787-98.7203399-116.0979787z"/></g></svg>
Remove the rx and ry parameters from rect tag.
<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><rect height="512" width="512" fill="#0083be"/><g fill="#fff"><path d="M61.05316483 178.66808913h85.76013915v257.9625333H61.05316483zM104.5127998 54.28063176c-29.34185723 0-48.512575 19.29035996-48.512575 44.5737057 0 24.75194797 18.5880448 44.57370568 47.37675114 44.57370568h.55470467c29.9027771 0 48.5156826-19.8217577 48.5156826-44.5737057-.55470467-25.28334572-18.6113517-44.57370568-47.9345634-44.57370568zM357.27944394 172.60209055c-45.4904445 0-65.8669069 25.01764686-77.27642064 42.58951v-36.52349588h-85.73838603c1.13737765 24.1972433 0 257.9625333 0 257.9625333h85.73683224V292.56591023c0-7.7114826.55470468-15.4198576 2.82790618-20.93116706 6.1872101-15.39965828 20.30498783-31.35246744 43.9925865-31.35246744 31.01218643 0 43.43632805 23.66429176 43.43632805 58.3278955v138.02046672h85.74149362v-147.9305687c0-79.2373094-42.30516557-116.0979787-98.7203399-116.0979787z"/></g></svg>
I have a <div> container of variable width, and also a <svg> of variable size contained within it.
The div is variable because it is based on window size. The svg is variable because it is defined by user input.
I'd like to scale the SVG such that it is entirely visible within the containing div, without the div cropping the svg, or with excess whitespace. Is there a method to do this?
Thank you very much!
Example: https://jsfiddle.net/5zq0bhu7/1/
What you're likely looking for is the viewBox property, which defines the bounds of your graphic and how it scales within its container. You can call svg.getBBox() to get the rough size of the internal paths of the SVG.
Here is the result:
var svg = document.querySelector("svg");
// Get internal size of SVG
var bbox = svg.getBBox();
// Construct and set a viewBox for the SVG
var viewBox = [bbox.x, bbox.y, bbox.width, bbox.height].join(" ");
svg.setAttribute("viewBox", viewBox);
<div id="drawing" style="border: 1px solid black; width: 200px; height: 200px;">
<!-- width and height will vary in the application, but are defined here for debugging purposes -->
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="none">
<g fill="none" stroke="#000">
<path stroke-width=".26458" d="M8.134 1.4a13.23 13.23 0 0 1 10.006 0M12.852.417a.285.285 0 1 1 .57 0 .285.285 0 1 1-.57 0M22.4 4.202a13.23 13.23 0 0 1 3.964 9.188M20.13 6.882a3.44 3.44 0 1 1 2.725 6.32 3.44 3.44 0 1 1-2.726-6.32m6.234 6.508" />
<path stroke-width=".26458" d="M25.81 17.44a13.23 13.23 0 0 1-.017.057 6.216 6.216 0 1 0-8.076 8.56 13.23 13.23 0 0 1-.056.02M23.64 22.7a.622.622 0 1 1-.853.903.622.622 0 1 1 .853-.904m-5.977 3.378" />
<path stroke-width=".26458" d="M12.624 26.866a13.23 13.23 0 0 1-.058-.003A6.216 6.216 0 1 0 2.26 21.177a13.23 13.23 0 0 1-.033-.048" />
<path stroke-width=".26458" d="M.208 16.447a13.23 13.23 0 0 1-.013-.057A6.216 6.216 0 1 0 3.13 4.992a13.23 13.23 0 0 1 .04-.044" />
</g>
</svg>
</div>
It's entirely visible in the container, and does not get cropped. Excess whitespace is aggressively scaled off. Here's a quick rundown of each property that is set:
viewBox to control the container scaling, dynamically generated with the call to getBBox()
width and height to force the graphic to fill its container
preserveAspectRatio to none to allow the SVG to scale to fit any container - remove this property to enforce the same aspect ratio - the SVG will instead fill the largest available dimension by default.