Can you scale an SVG to dimensions smaller than its viewbox without changing the dimensions of the viewbox?
<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" viewBox="0 0 1365 767" enable-background="new 0 0 1365 767" xml:space="preserve">
Related
I wanna know, is there any way to prevent scaling my SVG when zooming page in a browser?
Let's just say my SVG image is a measuring image and I want to keep the same size of my SVG independently from zoom in or zoom out page.
I'm using React
Style
svg: {
height: 150,
width: 150,
},
Example Code
<svg className={classes.svg} viewBox="0 0 150 150">
<g>
<circle cx={70} cy={70} r={32} fill="white" stroke="black"/>
<circle cx={70} cy={70} r={8} fill="black"/>
</g>
</svg>
You might use a viewport related unit like vw, vh.
<svg viewBox="0 0 150 150" style="width:5vw">
<g>
<circle cx="70" cy="70" r="32" fill="white" stroke="black"/>
<circle cx="70" cy="70" r="8" fill="black"/>
</g>
</svg>
Your svg element will keep it's initial size of 5vw.
This question already has answers here:
svg out of screen, is rendered?
(2 answers)
Closed 1 year ago.
I have several objects moving outside of the viewbox of a svg in react. For the sake of optimisation, I would like to conditionally render it. So the objects outside would not be rendered. But I'm asking myself if it's really needed. Does an SVG compute what is outside of a viewbox?
Yes, the browser computes everything outside the viewport for rendering. Calculates but does not display in the viewbox. Therefore, the question is relevant only in terms of rendering performance. If a part of a very large svg file with a lot of small details is outside the viewBox then rendering will be difficult. Although this will only show the visible part of the SVG.
comments of the author of the question:
I just do a 2.5d effect, so I have a prop for the pixels parcoured in
the x axis. I know where is everything that way, and just need some
calculation regarding the width of the viewbox
Calculating the width of the viewport
Below is an example with two SVG shapes. One figure is inside the svg viewBox, the second is outside
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="600" height="300" viewBox="0 0 600 300" style="border:1px solid" >
<g>
<rect x="20" y="50" width="200" height="200" rx="5%" fill="purple" />
<!-- Circle cx = "800" outside viewBox = "0 0 600 300" -->
<circle cx="800" cy="150" r="140" fill="greenyellow" />
</g>
</svg>
The circle is outside the svg of the canvas so it is not rendered in the browser
This is how it looks in the vector editor
In order for both figures to be inside the svg canvas, you need to calculate the parameters of the viewBox.
To do this, put both shapes in the group tag <g> and calculate the parameters of the viewBox
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="600" height="300" viewBox="0 0 600 300" style="border:1px solid" >
<g id="group">
<rect x="20" y="50" width="200" height="200" rx="5%" fill="purple" />
<!-- Circle cx = "800" outside viewBox = "0 0 600 300" -->
<circle cx="800" cy="150" r="140" fill="greenyellow" />
</g>
</svg>
<script>
console.log(group.getBBox())
</script>
Setting the computed viewBox attributes
It was: viewBox="0 0 600 300"
Now: viewBox = "20 10 920 280"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="600" height="300" viewBox="20 10 920 280" style="border:1px solid" >
<g id="group">
<rect x="20" y="50" width="200" height="200" rx="5%" fill="purple" />
<!-- Circle cx = "800" inside viewBox = "0 0 920 280" -->
<circle cx="800" cy="150" r="140" fill="greenyellow" />
</g>
</svg>
I have the below svg component. I want to stack multiple same svg components horizontally and vertically, to generate a bigger svg image in a grid.
I can stack them together but how do I convert it to an svg?
Please suggest, and if there is any package I can use. Thanks.
SVG Component
import React from "react";
import "./styles.css";
export default function MySVG() {
return (
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40">
<defs/>
<g/>
<g transform="scale(1,1)">
<g transform="scale(1,1)">
<rect id="cell" fill="rgb(16,28,138)" stroke="none" x="0" y="0" width="40" height="40" fill-opacity="0.40784313725490196"/>
</g>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 0 0 L 0 40" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 40 0 L 40 40" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 0 0 L 40 0" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 0 40 L 40 40" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
</g>
</svg>
);
}
App Component
import React from "react";
import MySVG from "./MySVG";
import "./styles.css";
export default function App() {
return [...Array(5).keys()].map((i) => <MySVG key={i} />);
}
CodeSandBox Link
I am trying to pass
<svg class="svg-abs svg-f-btm" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 140" style="margin-bottom: -9px; backgroundImage:new 0 0 1920 140;" xmlSpace="preserve">
<path class="svg-gray" d="M960,92.9C811.4,93.3,662.8,89.4,515.3,79c-138.6-9.8-277.1-26.2-409-53.3C97.8,24,0,6.5,0,0c0,0,0,140,0,140
l960-1.2l960,1.2c0,0,0-140,0-140c0,2.7-42.1,11.3-45.8,12.2c-45.1,11-91.5,20.1-138.4,28.1c-176.2,30.1-359.9,43.8-542.9,48.9
C1115.4,91.4,1037.7,92.7,960,92.9z"></path>
</svg>
This thing in React component but getting error at
style="margin-bottom: -9px; backgroundImage:new 0 0 1920 140;"
How can I correct it?
you need to do like this
style={{marginBottom: “-9px”, backgroundImage: “new 0 0 1920 140”}}
in react you pass it like this: style={{ marginBottom: -9px; backgroundImage: new 0 0 1920 140 }}, for the property remove '-' and use camelCase
How I can select the SVG element's "g" attribute "id" : as mentioned below "SvgElement" in react
like :
<svg id="L_1" data-name="L 1" xmlns="http://www.w3.org/2000/svg" width="1920" height="720" viewBox="0 0 920 420">
<rect id="Background" width="1920" height="720" fill="none"/>
<g id="SvgElement">
<circle cx="200" cy="100" r="50"/>
</g>
</svg>