We Keep Coding

Url in side of svg xmlns

I am trying to find url of this image:https://i.stack.imgur.com/Kfi6M.png
Page url:https://jobs.tnaa.com/jobsearch/results?Page=1&occupation=RN&city=&radius=20&state1=ALL&specialty=&GeoType=State
But there is no link except then svg xmlns. Can someone explain me what how can i find the url to this image and what is svg xmlns?
<a href="https://tnaa.com" class="logo logo--primary">
<svg xmlns="http://www.w3.org/6000/png" width="600" height="600" viewBox="0 0 105 105">
<path d="M473.85,66a1.29,1.29,0,0,1-.05-.24c0-.18,0-.36,0-.53V24a2.08,2.08,0,0,1,.06-.74,1.54,1.54,0,0,1,.3,0H578a2.79,2.79,0,0,1,.75.05c0,.1,0,.19,0,.28s0,.29,0,.44V81.33c0,.23,0,.45,0,.7a2.37,2.37,0,0,1-.31.06h-5.31l-.24,0-.22-.48Q569.49,74,566.3,66.5c-.07-.17-.15-.33-.22-.47-.53-.06-7.43-.06-7.88,0-.42.91-.8,1.86-1.2,2.81s-.8,1.89-1.2,2.83l-1.2,2.84-1.2,2.84c-.39.94-.8,1.89-1.2,2.83S551.41,82.08,551,83s-.78,1.89-1.24,2.9c-.61-1.4-1.16-2.72-1.71-4l-1.68-4-1.67-4L543,70l-1.68-4A2.09,2.09,0,0,0,541,66h-7.34l-.15,0c-.19.1-.21.29-.28.45L531.5,70.6l-7.2,17.07c0,.12-.11.23-.15.34s-.11-.09-.11-.14,0-.29,0-.43V66.66A1.6,1.6,0,0,0,524,66l-.47,0c-3.52,0-6.33,0-6.7.05-.13.16-.08.34-.08.52l.06,4.69.09,8.62a5.45,5.45,0,0,1,0,.56,1,1,0,0,1-.36-.39l-4.34-5.92-5.63-7.68-.15-.2a.5.5,0,0,0-.51-.26,4.51,4.51,0,0,1-.52,0H474.53A2.64,2.64,0,0,1,473.85,66Zm0,6.3q0,24.19,0,48.38a1.16,1.16,0,0,0,0,.18,1.52,1.52,0,0,0,.73.07H578c.15,0,.31,0,.47,0s.19,0,.31-.07V88.35c0-.15,0-.29,0-.44a1.64,1.64,0,0,0-.07-.28h-3.25a.7.7,0,0,0-.17.06c.06.14.1.27.16.41.41,1,.83,2,1.25,3,.05.13.15.25.09.42a1.81,1.81,0,0,1-.61.06H569.7a2.24,2.24,0,0,1-.31-.05l-.06-.07a.36.36,0,0,1,0-.09l-.06-.13q-3.4-8.86-6.83-17.72l-.12-.32a.08.08,0,0,0,0,0l0-.09s0,0,0,0h0s-.07,0-.07.06q-1.67,4.38-3.31,8.76a.38.38,0,0,0,0,.15,1.18,1.18,0,0,0,.56,0c1,0,1.94,0,2.91,0l.56,0a1.73,1.73,0,0,1,.12.2c.59,1.68,1.17,3.37,1.76,5.06a1.23,1.23,0,0,1,0,.19,1,1,0,0,1-.57.06H556.5c-.56,1.32-1,2.65-1.58,4a1.7,1.7,0,0,1-.28,0H544.9a1.7,1.7,0,0,1-.28,0c-.07-.16-.15-.32-.21-.48-.39-1-.78-2-1.18-3-.06-.16-.08-.35-.25-.45-.7,0-10.8,0-11.24,0-.07.16-.15.33-.22.51-.38,1-.76,2-1.15,3-.07.16-.09.35-.29.48l-.65,0H517.87c-.88,0-.68.07-1.16-.59l-8.28-11.27-1.68-2.28c-.05-.07-.09-.18-.25-.15a9.26,9.26,0,0,0,0,1.29c0,.42,0,.84,0,1.26s0,.87,0,1.31,0,.87,0,1.31,0,.87,0,1.3,0,.84,0,1.26,0,.87,0,1.31l0,1.31c0,.43,0,.87,0,1.3s0,.84,0,1.26a8.5,8.5,0,0,1,0,1.33,4.07,4.07,0,0,1-.47,0h-6.3a.75.75,0,0,1-.48-.09,2.45,2.45,0,0,1,0-.61V72.93c0-.16,0-.32,0-.49s0-.21,0-.32a1.5,1.5,0,0,0-.69-.06H474.11a1.87,1.87,0,0,0-.25,0A.65.65,0,0,0,473.81,72.25Zm9.64,19.3-.54,0c0-.11,0-.2-.05-.3s0-.22,0-.33c0-5.33,0-10.65,0-16a1.5,1.5,0,0,1,0-.56,1,1,0,0,1,.53-.07c2.06,0,4.13,0,6.19,0a.91.91,0,0,1,.53.08c0,.11,0,.24,0,.36.07,4.11,0,16.25-.05,16.76C489.66,91.57,487.27,91.59,483.45,91.55Zm28.94,32.08H474.13a2.3,2.3,0,0,0-.28.06,11,11,0,0,0,0,2.56l.71,0h38.2a2.3,2.3,0,0,0,.28-.06,16.83,16.83,0,0,0,0-2.56Zm24.79-50.24c-.54,1.41-1.07,2.82-1.6,4.24s-1,2.62-1.48,3.92c-.05.13-.14.26-.07.41.4.05,5.51.09,6.51,0a2.11,2.11,0,0,0,.28,0c-.05-.15-.09-.29-.14-.43-1.39-3.81-3.1-8.25-3.3-8.58A3.46,3.46,0,0,0,537.18,73.39Zm35.06,54c-.14-.2-.3-.39-.43-.6a1.77,1.77,0,0,1-.36-.59l.38-.27a1.9,1.9,0,0,0,.63-.75,2.08,2.08,0,0,0-1.39-2.9,4.21,4.21,0,0,0-1.17-.19c-.89,0-1.77,0-2.66,0a1.43,1.43,0,0,0-.28.07c0,.09,0,.15,0,.21,0,1.79,0,3.59,0,5.38a2.07,2.07,0,0,0,0,.3c.3,0,.57,0,.85,0a1.56,1.56,0,0,0,.8-.08c.09-.49,0-1,.08-1.44.85-.17.95-.13,1.39.48l.38.52.4.52h1.52l.28,0Zm-3.52-4a2,2,0,0,1,.28,0,7.22,7.22,0,0,1,.93,0,.93.93,0,0,1,.9.6.87.87,0,0,1-.73,1.17,3.69,3.69,0,0,1-1.37,0A6,6,0,0,1,568.72,123.47Zm-50.33.88a3.07,3.07,0,0,1-.85.06h-.78a2.69,2.69,0,0,1-.84-.06,5.42,5.42,0,0,1,0-1.06,5.76,5.76,0,0,0,0-1.1,4.36,4.36,0,0,0-1.69,0c0,.46,0,1,0,1.43s0,1,0,1.45,0,1,0,1.5a13.61,13.61,0,0,0,0,1.43,4.15,4.15,0,0,0,1.69,0c0-.35,0-.72,0-1.09a5.9,5.9,0,0,1,0-1.11,2.76,2.76,0,0,1,.85,0q.39,0,.78,0a2.28,2.28,0,0,1,.82.06,6,6,0,0,1,0,1.11,6.71,6.71,0,0,0,0,1.1,4,4,0,0,0,1.66,0,2.4,2.4,0,0,0,0-.28c0-1.75,0-3.51,0-5.27a2.19,2.19,0,0,0,0-.27,4.92,4.92,0,0,0-1.67,0C518.38,122.92,518.46,123.63,518.39,124.35Zm29,3.66c0-.14,0-.3,0-.46v-1.4c0-.13,0-.26.1-.36a11.68,11.68,0,0,1,2.38,0,.76.76,0,0,1,.06.47c0,.48,0,1,0,1.45a1.61,1.61,0,0,0,.06.35,9.72,9.72,0,0,0,1.62,0,1.07,1.07,0,0,0,0-.21c0-1.83,0-3.65,0-5.47a.59.59,0,0,0-.05-.19,1.24,1.24,0,0,0-.57-.06,4.51,4.51,0,0,0-.52,0c-.18,0-.38-.05-.57.1,0,.13,0,.27,0,.41,0,.47,0,.94,0,1.41a2.21,2.21,0,0,1-.05.33,7.2,7.2,0,0,1-1.22,0,3.54,3.54,0,0,1-1.25-.08c0-.17,0-.33,0-.49v-1.35c0-.11,0-.21,0-.34-.48,0-.93,0-1.38,0a1.07,1.07,0,0,0-.27.07c-.07.62-.05,5.46,0,5.86A5.23,5.23,0,0,0,547.4,128Zm-22-3.54c-.57,0-1.14,0-1.71,0-.16,0-.32,0-.46-.11a2.07,2.07,0,0,1,.06-1l.52,0h2.08a.81.81,0,0,0,.52-.09,4,4,0,0,0,0-1.14,1.6,1.6,0,0,0-.27,0h-4.32a1.59,1.59,0,0,0-.3.06c0,.09,0,.15,0,.21,0,1.81,0,3.62,0,5.42a1,1,0,0,0,0,.24,1.6,1.6,0,0,0,.27,0h4.43a1.77,1.77,0,0,0,.3-.06,3.35,3.35,0,0,0-.05-1.18h-2.83l-.41,0a2.91,2.91,0,0,1,0-1.1l.53,0h1.82a.47.47,0,0,0,.41-.12,5,5,0,0,0,0-1A1.94,1.94,0,0,0,525.44,124.47Zm50,1.3a.81.81,0,0,1,.52-.1c.61,0,1.22,0,1.82,0,.14,0,.27,0,.42,0a2.17,2.17,0,0,0,0-1.13l-.53,0H576a.89.89,0,0,1-.51-.07,1.8,1.8,0,0,1,0-1,1,1,0,0,1,.5-.06h2.19a.57.57,0,0,0,.47-.12c0-.16,0-.35,0-.55a1.4,1.4,0,0,0,0-.57l-.38,0h-4.06c-.15,0-.32,0-.44.11s0,.09,0,.13v5.47a.79.79,0,0,0,.06.22c.42,0,3.57.08,4.65,0a2,2,0,0,0,.32,0,3.34,3.34,0,0,0,0-1.18c-.55,0-1.09,0-1.62,0a13,13,0,0,1-1.64,0A3.23,3.23,0,0,1,575.47,125.77Zm-41.35,2c-.15-.33-.3-.65-.46-1-.66-1.4-1.31-2.8-2-4.21a.86.86,0,0,0-.29-.45h-1.63c-.06.12-.14.23-.19.34-.17.36-.34.71-.5,1.07-.63,1.34-1.27,2.68-1.89,4-.07.15-.2.3-.14.48a5.62,5.62,0,0,0,1.67,0,12,12,0,0,1,.55-1.07l.22,0c.71,0,1.42,0,2.13,0a.46.46,0,0,1,.5.33c.1.27.23.53.34.79a7.32,7.32,0,0,0,1.75,0A2.13,2.13,0,0,0,534.12,127.77Zm-2.74-2.12a.65.65,0,0,1-.17.08,6.8,6.8,0,0,1-1.42,0,8.52,8.52,0,0,1,.57-1.46c0-.13.06-.29.23-.36A8.33,8.33,0,0,1,531.38,125.65Zm34.83,2.2c-.35-.85-2.52-5.39-2.73-5.69a6.19,6.19,0,0,0-1.73,0l-2.63,5.61a1.42,1.42,0,0,0-.07.22,4.91,4.91,0,0,0,1.71,0c.23-.33.28-.75.54-1.06a19.91,19.91,0,0,1,2.68,0c.27.32.29.77.57,1.09a6.6,6.6,0,0,0,1.69,0A1.13,1.13,0,0,0,566.21,127.85Zm-2.79-2.21c-.13.15-.32.09-.48.1a5.42,5.42,0,0,1-.57,0,.85.85,0,0,1-.53-.09,3.88,3.88,0,0,1,.34-.89c.12-.29.25-.59.41-.94A7.06,7.06,0,0,1,563.42,125.64ZM558,122.4a4,4,0,0,0-2.32-.36,3.52,3.52,0,0,0-1.59.55,2.89,2.89,0,0,0-1.37,2.62,3,3,0,0,0,2.24,2.84,4.38,4.38,0,0,0,2.46,0,2.92,2.92,0,0,0,1.27-.72,1.35,1.35,0,0,0,.18-.25l-.51-.44c-.18-.14-.32-.34-.54-.4l-.08,0-.2.15a1.94,1.94,0,0,1-1.49.42,1.62,1.62,0,0,1-1.38-.89,1.75,1.75,0,0,1-.16-1.23,1.69,1.69,0,0,1,1.65-1.37,1.94,1.94,0,0,1,1.3.38l.37.27a7,7,0,0,0,1-.91A2.24,2.24,0,0,0,558,122.4ZM541.23,124v3.49a.81.81,0,0,0,.1.55,3.44,3.44,0,0,0,.79,0,1.64,1.64,0,0,0,.84-.1c0-.18,0-.37,0-.57,0-1.13,0-2.25,0-3.38a.89.89,0,0,1,.09-.59c.12,0,.26,0,.39,0h1.09a2.71,2.71,0,0,0,.37,0c0-.29,0-.57,0-.84a3.16,3.16,0,0,0,0-.32.71.71,0,0,0-.47-.08,47.82,47.82,0,0,0-5.1.07,2.79,2.79,0,0,0,0,1,.48.48,0,0,0,.09.21c.6,0,1.19,0,1.84,0C541.22,123.68,541.23,123.86,541.23,124Zm-2.1,2.79h-2.29a.21.21,0,0,1-.21-.18,3.24,3.24,0,0,1,0-.44v-3.48a1.14,1.14,0,0,0-.07-.56,9.66,9.66,0,0,0-1.32,0,2,2,0,0,0-.28,0c-.09.41-.11,2.83-.07,5.48,0,.13,0,.25,0,.39a1.31,1.31,0,0,0,.22.05h4.37a.46.46,0,0,0,.16-.06,1.13,1.13,0,0,0,0-.18v-.94A1.17,1.17,0,0,0,539.13,126.82Z" transform="translate(-473.79 -23.23)">
</path>
</svg>
</a>

There is actually no url for the image, that is an SVG, the entire image is drawn in the <path ....>
To use that image just copy the SVG, that is everything from:
<svg xmlns="....
</svg>

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)

Is it possible to dynamically add assets(css, js, icons etc) inside iframe?

I was wondering if possible to add external javascript or css inside an iframe, I have an iframe on our website generated from 3rd party application zendesk chat and I need to change the icon and text inside of it.
<iframe id="webWidget" tabindex="0">
<html>
<head></head>
<body>
<div id="Embed">
<div class="src-component-Launcher-wrapper u-isActionable u-textLeft u-inlineBlock u-borderNone u-textBold u-textNoWrap Arrange Arrange--middle u-userLauncherColor ">
<!-- This is the icon -->
<span class="src-component-Icon-container src-component-Launcher-icon src-styles-components-Icon-Icon Arrange-sizeFit u-textInheritColor u-inlineBlock Icon" type="Icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M11,12.3V13c0,0-1.8,0-2,0v-0.6c0-0.6,0.1-1.4,0.8-2.1c0.7-0.7,1.6-1.2,1.6-2.1c0-0.9-0.7-1.4-1.4-1.4 c-1.3,0-1.4,1.4-1.5,1.7H6.6C6.6,7.1,7.2,5,10,5c2.4,0,3.4,1.6,3.4,3C13.4,10.4,11,10.8,11,12.3z"></path><circle cx="10" cy="15" r="1"></circle><path d="M10,2c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S5.6,2,10,2 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0 L10,0z"></path>
</svg>
</span>
<!-- This is the text -->
<span class="src-component-Launcher-label Arrange-sizeFit u-textInheritColor u-inlineBlock ">
Support
</span>
</div>
</div>
</body>
</html>
</iframe>
I successfully change the text from "Support" to "Contact Sales" by this code
$(document).ready(function(){
zE(function(){
$zopim(function(){
$("#launcher").css('width', 'auto');
$("#launcher").contents().find("span.src-component-Launcher-label").text('Contact Sales');
});
});
});
But the problem now is the icon is svg
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M11,12.3V13c0,0-1.8,0-2,0v-0.6c0-0.6,0.1-1.4,0.8-2.1c0.7-0.7,1.6-1.2,1.6-2.1c0-0.9-0.7-1.4-1.4-1.4 c-1.3,0-1.4,1.4-1.5,1.7H6.6C6.6,7.1,7.2,5,10,5c2.4,0,3.4,1.6,3.4,3C13.4,10.4,11,10.8,11,12.3z"></path><circle cx="10" cy="15" r="1"></circle><path d="M10,2c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S5.6,2,10,2 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0 L10,0z"></path>
</svg>
Is there's a way to change it using jQuery or javascript?
Is there's a way to add bootstrap/font-awsome inside of this iframe and replace svg to something like that?
PS: I am aware that I can inject css and js to an iframe, however, the problem is zendesk has security stuff that not allowing to do it.
Thanks!

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>

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