I check my site in browserstack and on same IOS or MacOs device in
different times SVG can work or can render empty space
//SVG USAGE
<svg>
<use xlinkHref={`#${id}`} />
</svg>
//SVG
<svg
onClick={onClick}
className="top-controls-panel__icon top-controls-panel__icon--points"
x="0px"
y="0px"
viewBox="0 0 47.1 12.1"
xmlSpace="preserve"
data-ieadjustwidth="40%"
>
<path d="M0.4,6.1c0,3.1,2.5,5.6,5.6,5.6s5.6-2.5,5.6-5.6S9.1,0.5,6,0.5S0.4,3,0.4,6.1" />
<path d="M17.4,6.1c0,3.1,2.5,5.6,5.6,5.6s5.6-2.5,5.6-5.6c0,0,0,0,0,0c0-3.1-2.5-5.6-5.6-5.6S17.4,3,17.4,6.1L17.4,6.1" />
<path d="M35.4,6.1c0,3.1,2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6S44.1,0.5,41,0.5C37.9,0.5,35.4,3,35.4,6.1L35.4,6.1" />
</svg>
I use JavaScript and React, problem that sometimes on IOS or MacOS
an empty space is rendered instead of svg.
I dont have apple device and testing site on browserStack service
In other questions I found that size of SVG can influence for that SVG is not render, but I dont undestand how that sizes should calculate, if sizes indicated in CSS in percent?
Also I change <use href... to <use xlinkHref... it is not work for me.
Now I won't try use
img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'"
instead of SVG, or I should use another variant?
Newbie to working with SVGs and I've run into a problem. Basically I'm using the Noun Project API pro version ( https://api.thenounproject.com/ ) to scrape icons as SVGs. Right now, I save the SVGs in a local folder. I want to be able to change the color of the icon (right now they download as black, and I want to change the color). I am loading the SVGs via the tag with a reference to the folder where the SVGs are being saved. I know it's fairly simple to change the color using vanilla JS (using document.getElementById('svgObject').contentDocument, and then accessing the inner document using a unique id). The problem is that the SVGs I save don't have any ID, and I don't know how to give them an ID. Right now, I'm looping through the folder and displaying the folder contents in a webpage. That's all working fine, but I can't manage to figure out how to change the color.
Basically, I just want all the icons in the folder to be set to a different color (for example, they could all be set to "red." They don't need to each have a different color). How do I do that without specifying the actual ID (since the SVG doesn't include an ID upon download), or else how do I add an ID to the SVG tag itself?
Assuming you have a bunch of svgs on your page and you'd like to change the color of each to the same color, you could do the following:
function changeSvgColors() {
const svgs = document.getElementsByTagName('svg')
for (let i = 0; i < svgs.length; i++) {
svgs[i].setAttribute('fill', 'red')
}
}
This will loop through every svg on your page and set their fill attribute to red.
Essentially, this is equivalent to doing this:
<svg viewBox="0 0 512 512" fill="red">
...
</svg>
Here's a quick demo:
JSFiddle
Alternatively, if you're using something like the img tag to load your svgs onto your page, using object instead would let you do the same thing as above.
Assuming your html looks like the following:
<div>
<object
data="http://localhost:5000/image.svg"
type="image/svg+xml"
></object>
</div>
Then,
function changeSvgColors() {
const objects = document.getElementsByTagName('object')
for (let i = 0; i < objects.length; i++) {
const object = objects[i]
const svg = object.contentDocument.rootElement
svg.setAttribute('fill', 'red')
}
}
One option would be using the svg as an image (or as an object if you prefer) and filters to change the color.
#theImage{filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);}
<img id="theImage" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/bone300.svg" >
Please read this article: Solved with CSS! Colorizing SVG Backgrounds
Yet another option is using the svg as a mask. Keep in mind that the support for mask is not that good.
#theDiv{
display: inline-block;
width:300px;
height:134px;
-webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/bone300.svg);
mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/bone300.svg);
mask-size: cover;
background:red;
}
<div id="theDiv"></div>
But the best option would be to use the svg inline. You may save all your icons in a root svg element with width="0"; height="0"; position="absolute". Next you can use the icons with <use> and you change the color using the fill attribute <use fill="red" xlink:href="..... or styling it in CSS
You can give the SVGs a class instead of an id & set the color using javascript's getElementsByClassName
This Mozilla article explains:
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Your best shot in achiveing this is to make use of the fill attibute for svg elements. Now, you can work this out two ways
Method 1:
Using img tag like this <img src="your_file.svg" />. In this case, you will need to edit the file directly, and that's it, it should reflect everywhere you reference the svg.
Method 2:
You can use svg as inline like below. The advantage in this approach is that if you have varying instance of the same svg, then this is the way to go. On the other side, if your svg stays same throughout the app, this goes against the DRY principle.
svg {
max-width: 200px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M25,7l28,36l40-18l-36,25l19,44l-27-37l-41,17l36-26z" fill="#cfc"/>
<ellipse cx="50" cy="50" rx="32" ry="30" stroke="#fc0" fill="none" stroke-width="11"/>
<path d="M63,2l-7,43l42,17l-45-6l-16,42l7,-45l-42-16l45,6z" fill="#3cc"/>
</svg>
If you don't mind having the svg all one color, you could set the fill attribute of the svg to currentcolor. Then it will take on the color of the element that it is in.
#span1 {
color: red;
}
#span2 {
color: blue;
}
#span3 {
color: green;
}
<body>
<span id=span1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="150" height="150" fill-rule="evenodd" fill="currentcolor">
<title>HTML5 Logo</title>
<path d="M12,0 188,0 172,180 100,200 28,180Z M45,37 156,37 154,59 69,59 71,81 152,81 146,149 100,162 54,149 52,114 74,114 76,132 100,139 124,132 127,103 51,103Z"/>
</svg>
</span>
<span id=span2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="150" height="150" fill-rule="evenodd" fill="currentcolor">
<title>HTML5 Logo</title>
<path d="M12,0 188,0 172,180 100,200 28,180Z M45,37 156,37 154,59 69,59 71,81 152,81 146,149 100,162 54,149 52,114 74,114 76,132 100,139 124,132 127,103 51,103Z"/>
</svg>
</span>
<span id=span3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="150" height="150" fill-rule="evenodd" fill="currentcolor">
<title>HTML5 Logo</title>
<path d="M12,0 188,0 172,180 100,200 28,180Z M45,37 156,37 154,59 69,59 71,81 152,81 146,149 100,162 54,149 52,114 74,114 76,132 100,139 124,132 127,103 51,103Z"/>
</svg>
</span>
</body>
If you have an Angular component that uses svg files by referring to symbols from one packed file:
svg instance
<svg>
<use xlink:href="#my-symbol"></use>
</svg>
symbols as they appear in the imported file
<symbol id="my-symbol" viewBox="0 0 24 24">
<title>my-symbol</title>
<path class="path1" d=" ... data here ..."></path>
</symbol>
in order to get control over scaling behavior, every symbol element should apparently have preserveAspectRatio="..." set accordingly.
What if I want to do that dynamically, taking the values for preserveAspectRatio from component instance HTML input?
Something like:
imaginary my-icon template
<my-icon preserveAR="alignMeetOrSlice">
<svg preserveAspectRatio="{{preserveAR}}">
<use xlink:href="#my-symbol"></use>
</svg>
</my-icon>
desired render:
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://somedomain.com/my.svg#my-symbol"></use>
#shadow-root (user agent)
<svg id="my-symbol" viewBox="0 0 24 24"> <!-- attribute should go to this svg -->
...
</svg>
</svg>
I tried querySelector('symbol') on the container - but it returned null results.
Is there a method to get into the shadow root and modify the symbol element?
In JS you can use direct assignment for svg.preserveAspectRatio.baseVal.align.
Instead a preserveAspectRatio="none" in HTML
you can write svg.preserveAspectRatio.baseVal.align=1 or svg.setAttribute('preserveAspectRatio', 'none'); in an JS script.
The examples are presented here:
with code-generation
alternatively with HTML-injection
and available values for aspectRatio can be seen here
I'm playing around with SVG and I've hit a wall.
what im trying to do it when you hover over on svg element it will cause another to appear.
my idea was using javascript to add and remove a "hidden" class when you hover, but its not working, it works on none SVG elements but I can't see why it's not working here.
<svg xmlns:cc="http://web.resource.org/cc/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="400px"
height="400px"
viewBox="0 150 960 900">
<path id="loc36" class="maploc" d="m 352.28954,738.20354 0,140.66609 85.8653,0 0,-140.41399 z"/>
<path id="info36" class="infopanel " d="m 306.42857,896.64787 0,157.85713 539.28572,0 0,-158.57141 z"/>
</svg>
Javascript
$("#loc36").hover(function(){
$('#info36').removeClass('hidden');
},function(){
$('#info36').addClass('hidden');
});
https://jsfiddle.net/atprsteq/
Its works on none SVG elements, like this example
http://jsfiddle.net/EzfwV/210/
Am I just missing something simple here?
Am I just missing something simple here?
Yes.
You forgot to include jQuery!
Select jQuery from the "Frameworks & Extensions" menu.
I am pretty new at editing and embedding SVG to webpages. My client is a graphic designer so he created an svg logo for his website and wanted me embed it to his nav bar.
I am also using Bootstrap and as part of the development I am using bootstrap tooltips. However, once i embed the svg and edit the co-ordinates via viewbox, I encountered a problem with one of my tooltips.
The tooltip seems to be buggy with this particular logo. The rest of them are okay but for some reason I cannot figure out how to fix this one.
I have uploaded the website today for testing purposes and you can see the issue on http://edizorac.com/
The problematic logo is the second one on the navigation bar and you can also see my code through web inspector.
Any help/recommendation is appreciated!!
Thanks in advance :)
Update:
Sorry for any inconveniences. The svg code is as follows:
<li>
<a href="#projects">
<span>
<svg version="1.2" baseProfile="tiny" x="0px" y="0px" width="70px" height="60px" viewBox="50 40 90 120" data-toggle="tooltip" title="Projects">
<polygon fill="none" stroke="#ffffff" stroke-miterlimit="10" points="33.493,81.046 96.934,46.112 88.647,82.874 57.203,117.371 52.946,86.674 99.573,74.629 81.325,117.276 37.909,101.254"/>
<polyline fill="none" stroke="#ffffff" stroke-miterlimit="10" points="96.451,81.928 114.361,106.172 112.365,112.871 82.791,113.852 "/>
<line fill="none" stroke="#ffffff" stroke-miterlimit="10" x1="95.854" y1="47.473" x2="37.909" y2="101.254"/>
</svg>
</span>
</a>
</li>
May I suggest you have a read over this and also have a look at this to help you with SVG's
Change the first line of your SVG block to:
<svg version="1.2" baseProfile="tiny" x="0px" y="0px" width="40px" height="40px" viewBox="30 47 85 70" data-toggle="tooltip" title="" data-original-title="Projects">
You made the following mistakes:
You had the height and width set incorrectly compared to the other SVG's (Height you had defined: 60px & Width you had defined 70px)
Your viewBox property was set incorrectly so the elements didn't align properly