Can I have Multiple SVG images in a single file?
You can only have a single root node in an html document. Nevertheless there are various ways to achieve what you want.
One way is SVG Stacks which works by having all the drawings on top of each other and then just displaying the one you want to see using CSS.
Another way might be to have a shapes.svg like this with all the drawings in different places
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate(0,0)">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</g>
<g transform="translate(0,200)">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0,400)">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</g>
</svg>
And then use svgView to show just the bits you want.
<html>
<body>
<embed src="shapes.svg#svgView(viewBox(50,0,100,100))" style="width:100px; height:100px" type="image/svg+xml" />
<embed src="shapes.svg#svgView(viewBox(0,200,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>
<embed src="shapes.svg#svgView(viewBox(0,400,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>
</body>
</html>
All of these do mean though that you use more memory in the UA as the whole svg file is loaded 3 times and you just see a part of it each time.
React - import multiple svgs in a single file
You cant export default
multiple value type thing.
Either do this:
export {
IconVideoOn,
IconVideoOff,
IconMicOn,
IconMicOff
};
then your existing import works
Or do this:
const MySVG = {
IconVideoOn,
IconVideoOff,
IconMicOn,
IconMicOff
};
export default MySVG;
Then import like this:
import MySVG from '../../components/Icons/icons';
and use like this:
<img src={MySVG.IconVideoOn} alt=""/>
multiple svg images in one file breaks text
Check that there are no duplicate id
attributes in the two SVGs. id
s must be unique on the page, otherwise any SVG features that use id references (like <use>
, gradients etc) can't be trusted to point to the right thing.
Since Chrome and FF handle duplicate ids differently, a quick way to check this is the cause would be to see if the two browsers render the two-svg page differently.
Related Topics
Sharepoint 2013 Deleting Contents of <Style> in Embed Code When Saving
Sorting CSS Properties into an Arbitrary Order
Check If Parent Has Class Using Less
How to Float a Twitter Bootstrap Navbar Item Right with Either Class=Pull-Right or Float:Right
CSS How to Position an Element in a Middle (Half Height/Vertical 50%) of Another Element
How to Use CSS Variables with Tailwind CSS
How to Make a Div Visible on Top of an HTML5 Fullscreen Video
Including CSS with '<Link>' or '@Import' - Which Is Better
Ionic 4: Changing Ion-Content Background Does Not Work
Why Doesn't CSS Hover Work on Table Rows When The Cells Inside The Rows Have Class Names
Creating a Fuzzy Border in CSS 3
Can Visual Studio 2013 Generate CSS Files from .Less Files
How to Use Font Awesome in Own CSS
Generate Random Color with Pure CSS (No JavaScript)
Bootstrap Container with Position:Absolute Loses Layout Inside