We Keep Coding

How to change the color of a SVG icon when imbedded in a website builder

Total newb here but I have this simple question.
I am building a new site for a client and want to be able to link to a Wistia Popover video directly from a button on the hero section of the website.
I am sharing the website here.
http://photography-5-1571342377793.showit.site/
<script src="https://fast.wistia.com/embed/medias/xsde7mhige.jsonp" async=""></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async=""></script><span class="wistia_embed wistia_async_xsde7mhige popover=true popoverContent=link" style="display:inline;position:relative"><div class="se-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M265 96c65.3 0 118.7 1.1 168.1 3.3h1.4c23.1 0 42 22 42 49.1v1.1l.1 1.1c2.3 34 3.4 69.3 3.4 104.9.1 35.6-1.1 70.9-3.4 104.9l-.1 1.1v1.1c0 13.8-4.7 26.6-13.4 36.1-7.8 8.6-18 13.4-28.6 13.4h-1.6c-52.9 2.5-108.8 3.8-166.4 3.8h-10.6.1-10.9c-57.8 0-113.7-1.3-166.2-3.7h-1.6c-10.6 0-20.7-4.8-28.5-13.4-8.6-9.5-13.4-22.3-13.4-36.1v-1.1l-.1-1.1c-2.4-34.1-3.5-69.4-3.3-104.7v-.2c-.1-35.3 1-70.5 3.3-104.6l.1-1.1v-1.1c0-27.2 18.8-49.3 41.9-49.3h1.4c49.5-2.3 102.9-3.3 168.2-3.3H265m0-32.2h-18c-57.6 0-114.2.8-169.6 3.3-40.8 0-73.9 36.3-73.9 81.3C1 184.4-.1 220 0 255.7c-.1 35.7.9 71.3 3.4 107 0 45 33.1 81.6 73.9 81.6 54.8 2.6 110.7 3.8 167.8 3.8h21.6c57.1 0 113-1.2 167.9-3.8 40.9 0 74-36.6 74-81.6 2.4-35.7 3.5-71.4 3.4-107.1.1-35.7-1-71.3-3.4-107.1 0-45-33.1-81.1-74-81.1C379.2 64.8 322.7 64 265 64z"></path><path d="M207 353.8V157.4l145 98.2-145 98.2z"></path></svg></div></span>
As you can see for the first two hero images we just have the icons link to a instagram video.
On the 3rd hero image you'll see that I have the same SVG icon and it goes to a wistia popover video.
I just need to figure out what I need to do in order to make the icon white to match the other play icons in the hero section. Im sharing the code that I have here imbedded on the site... As well as a screenshot from my site builder....screenshot from site builder
Thank's for your help!
-Nathan
509.250.2187

Welcome to stack overflow!
To fix your problem, just add filter: invert(100%); instead of color: white; on your svg styling. This should fix your problem :)
EDIT:
Based on what I now know, here is what you should do to fix the issue:
instead of just using this:
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1">
<rect width="200" height="100" stroke="black" stroke-width="6" fill="green"/>
</svg>
You should go for something like this (add the style tag with its contents)
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1" id="hero-movie-icon">
<rect width="200" height="100" stroke="black" stroke-width="6" fill="green"/>
</svg>
<style>
svg#hero-movie-icon {
filter: invert(100%);
}
</style>
Also, notice that I added an id attribute to the svg tag, so that I can reference the svg more precisely from the css (which is inside of the style tag)

Exporting to SVG in fabric with svgs doesn't match canvas

We are using Fabric.js 1.7.20. We aren't able (yet) to update to 2.0+.
http://jsfiddle.net/tcem4f4L/
The issue is that we are adding SVG objects to the map, but when they get output to an svg, some padding within the SVG causes the rendering to not look correct. The svg x/y coordinates and any lines within them need to have the stroke accounted for.
I'm trying to figure out a clean way to handle these and ensure that the bounding box on the canvas is around the SVG for aligning purposes.
Example SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="95" height="11" viewBox="0 0 95 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="95" height="11"></rect>
<path stroke-linecap="square" stroke-width="3" d="M1,9 l93,0"/>
</g>
</svg>
So (I think) to fix it on output to SVG, I'd need to change the rect x and y to 0.5 and the path to d="M1.5,9.5 l93,0"
I am worried that there are other things in this I'm missing.

SVG text line height displays differently within img tag

I have created an SVG image which I am using within our website.
The SVG is displayed by inserting the XML into the HTML file, however, when loaded like this the SVG displayed differently compared with being displayed within an img tag.
<img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" />
I am just trying to reduce the line height within the following SVG:
https://jsfiddle.net/fahc2vvq/
I have to load in the XML version to edit the SVG within the website, Any ideas?

If you want a <foreignObject> to function correctly, you need to include a <body> element.
Note: I've removed the image from this demo to make it smaller.
<img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" />
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="73mm"
height="150mm"
viewBox="0 0 73 150"
version="1.1"
id="svg4523">
<g
id="layer1"
transform="translate(0,-147)">
<foreignObject
x="15"
y="150"
width="40"
height="60">
<body>
<p id="credit-card-text" style="font-size: 4px;text-align:center;text-anchor:middle;fill-opacity:1;font-weight:bold;line-height: 1;">Customise with your own message here.</p>
</body>
</foreignObject>
</g>
</svg>

SVG paths not displaying in Safari

I have an SVG file of icons that looks like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="instagram" d="..."/>
<path id="linkedin" d="..."/>
<path id="twitter" d="..."/>
</svg>
And it's referenced in my HTML like this:
<a href="...">
<svg viewBox="0 0 32 32"><use xlink:href="icons.svg#instagram"></svg>
</a>
<a href="...">
<svg viewBox="0 0 32 32"><use xlink:href="icons.svg#linkedin"></svg>
</a>
<a href="...">
<svg viewBox="0 0 32 32"><use xlink:href="icons.svg#twitter"></svg>
</a>
And, like many questions before this one, the SVGs aren't rendering in Safari on desktop nor mobile.
Is there a way to have them render with the <svg> tags that works in all browsers? I'd like to not have to edit the CSS that styles the <svg> tags if possible. Is the <object> tag the only solution that works across all browsers? Is referring to the id of the path also valid with the <object> tag?
Thanks!

Use javascript to overlap two svgs, and save file

Is it possible to load two SVGs with JavaScript? For example, then use the first SVG as the base and the second SVG as a badge in the corner and then scale the combination as one and save as a single SVG?

Yes, you can append an <svg> element into an svgDocument :
var svgDocs = document.querySelectorAll('svg');
svgDocs[0].appendChild(svgDocs[1]);
svgDocs[1].width.baseVal.value/=3;
svgDocs[1].height.baseVal.value/=3;
svg{ border:1px solid}
<svg version ="1.1" id="first" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" height="250" width="250">
<circle cx="60" cy="60" r="50" fill="pink"/>
</svg>
<svg version ="1.1" id="second" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" height="250" width="250">
<rect x="10" y="10" width="100" height="100" fill="green"/>
</svg>

stepwise:
0: Load your resources with:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
1: Use transforms to scale, translate, as needed:
https://developer.mozilla.org/en/docs/Web/SVG/Attribute/transform
2: To convert the final composite SVG element to file use/modify https://github.com/NYTimes/svg-crowbar, which I found from this Convert JavaScript-generated SVG to a file
or better discussion:
Generating, viewing, and saving SVG client-side in browser
disclaimer: I haven't tested this approach, so can't guarantee it, but I've done a lot of work programmatically with SVGs in the last few months, and I think it will work.
my work:(needs refactor but linked in case it could help understanding the HTML SVG API):
https://github.com/Terebinth/Vickers/blob/master/lib/minesweeper/minesweeper_001_.coffee