I want to have the facebook customer chat svg icon from this site: https://craftedmiracle.com/. How can I get it? Thanks
I want the icon that have round white background EXACTLY on the above web. Fb also provides messenger icon but it does not look like the version on the web
I inspect the web but don't know how to extract the svg tag to .svg file
You can visit this link:
https://icons8.com/icons/set/facebook-messenger
This has facebook icons that you want in many forms. Click on Download > Select SVG tab > Select the Size of icon that you wish to download > Finally Download.
EDIT:
Or I have created an SVG for you:
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><path d="M86,172c-47.49649,0 -86,-38.50351 -86,-86v0c0,-47.49649 38.50351,-86 86,-86v0c47.49649,0 86,38.50351 86,86v0c0,47.49649 -38.50351,86 -86,86z" fill="#3498db"></path><g><path d="M86,28.66667c-30.1,0 -54.46667,23.22 -54.46667,51.6c0,14.90667 6.59333,28.09333 17.2,37.55333v25.51333l22.36,-13.47333c4.58667,1.14667 9.74667,2.00667 14.90667,2.00667c30.1,0 54.46667,-23.22 54.46667,-51.6c0,-28.38 -24.36667,-51.6 -54.46667,-51.6z" fill="#ffffff"></path><path d="M51.6,97.46667l28.66667,-31.53333l14.33333,14.33333l25.8,-14.33333l-28.66667,31.53333l-14.33333,-14.33333z" fill="#3498db"></path></g><path d="" fill="none"></path></g></svg>
Hope this helps.
https://iconmonstr.com/facebook-messenger/
https://fontawesome.com/icons/facebook-messenger
Also - if you're using Font Awesome, they have an icon for it as well.
You can also download it and serve it locally, depending on your needs.
Related
Anyone could guide me with how to do CSS Image Clip path with SVG unique shapes?
Some people were suggesting to a third-party plugin like SVG Injector and all. Anyone could help me how to achieve this task that will work in all the browsers?
I have given one example image to make it better understanding. Kindly check the below image.
http://ktdev.khaleejtimes.ae/shape.jpg
Thanks & Appreciated.
First you need to draw a path with the desired shape. Next you use the shape to clip the image using <clipPath>
svg{border:1px solid}
<svg viewBox="0 0 643 525">
<defs>
<clipPath id="shape">
<path fill="none" d="M109,120c0,0,163,46,220,9s34-97,34-97s39.138-16.341,70-11c26.406,4.57,66.618,73.939,105,138
c37.199,62.089,73,119,73,119s10.398,18.504,0,44c-8.608,21.105-22.685,41.421-88.85,85.03C468.32,442.51,411,474,411,474
s-85,45-192,9l-5,1c0,0-34.254,15.226-60.675,10.088c-36-7-48.249-32.676-48.249-32.676S172,402,160,327S60,220,60,220
s-8.444-34,0-52C77.666,130.345,109,120,109,120z"/>
</clipPath>
</defs>
<image width="643" height="643" clip-path="url(#shape)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
</image>
</svg>
Anyone could guide me with how to do CSS Image Clip path with SVG unique shapes?
Some people were suggesting to a third-party plugin like SVG Injector and all. Anyone could help me how to achieve this task that will work in all the browsers?
I have given one example image to make it better understanding. Kindly check the below image.
http://ktdev.khaleejtimes.ae/shape.jpg
Thanks & Appreciated.
First you need to draw a path with the desired shape. Next you use the shape to clip the image using <clipPath>
svg{border:1px solid}
<svg viewBox="0 0 643 525">
<defs>
<clipPath id="shape">
<path fill="none" d="M109,120c0,0,163,46,220,9s34-97,34-97s39.138-16.341,70-11c26.406,4.57,66.618,73.939,105,138
c37.199,62.089,73,119,73,119s10.398,18.504,0,44c-8.608,21.105-22.685,41.421-88.85,85.03C468.32,442.51,411,474,411,474
s-85,45-192,9l-5,1c0,0-34.254,15.226-60.675,10.088c-36-7-48.249-32.676-48.249-32.676S172,402,160,327S60,220,60,220
s-8.444-34,0-52C77.666,130.345,109,120,109,120z"/>
</clipPath>
</defs>
<image width="643" height="643" clip-path="url(#shape)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
</image>
</svg>
I'm rather new to icon-fonts in CSS and now ran into the following Problem:
I have several boxes containing an Icon. Sadly the upper part of the icon get's cropped off.
I found out, that the icon-font I'm using is adding a ::after-pesudo-element which is slightly offset to the original element and that causes the part that is cut off. (See Screenshots)
(The Icon-Font I'm using is http://linea.io)
I inverstigated furhter and realized that this only occured due to the fact that I have the following CSS on the Icon:
-webkit-background-clip: text;
color: transparent;
If I remove this, the Icon-Color will become black and be shown whole.
I don't know if this is due to a bug in my CSS since I couldn't find anything on the web.
But I removed almost all of my personal CSS and the bug still occured.
Those don't look like CSS fonts, they're simply SVGs. That off set error you see tends to happen when the viewBox, height, or width of the SVG isn't correct. If you still need to use them you should inline them, just copy and paste the SVG code.
Taken from the link you posted:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="32" cy="22" r="6"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M53,22.735C52.948,10.73,43.599,1,32,1
s-21,9.73-21,21.735C11,38.271,31.965,63,31.965,63S53.069,38.271,53,22.735z"/>
</g>
</svg>
If you prefer to use a real CSS icon library, I'd recommend using something a bit a more tested such as Font Awesome. But these are a dime a dozen and if you Google you could potentially find something you like.
Background
I have a set of SVG icons that all have drop shadows. To make this work in Chrome, I can't just use filter:drop-shadow. I have to use filter:url(#drop-shadow), and define the drop shadow in my <defs> section.
I also have multiple instances of these icons on the page (they are filetype icons in a list of files), so I am using <use> to keep my page DRY.
Code
Exernal SVG File
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<filter id="drop-shadow">
<feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" stdDeviation="4"/>
..... more filter lines, shortened for brevity
</filter>
</defs>
<symbol id="download-pdf">
<path filter="url(#drop-shadow)" d="" fill="">...</path>
</symbol>
<symbol id="download-zip">
..... another icon
</symbol>
... more icons
</svg>
Inline SVG on the Page
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="URL_OF_EXTERNAL_SVG"></use>
</svg>
See minimal working example here: http://h.andymercer.net/chrome-svg-bug/
Problem
The problem is that Chrome isn't finding the #drop-shadow link, and so is breaking the icons. Firefox, conversely, displays the icons perfectly.
Firefox:
Chrome:
If you notice, the Chrome screenshot DOES show some portion of the icon. It is displaying the portions that don't use the drop shadow filter.
I can't figure out why this is, because the drop shadow is in the <defs> that is on the same page as the <symbol>.
Question
Is there something I am missing, or is this a Chrome bug?
Edit
Per comments, I was asked for a MCVE. I hadn't done that because the problem inherently requires external URLs, which is typically frowned upon here. However, to demonstrate the problem, take a look at this:
http://h.andymercer.net/chrome-svg-bug/
In Firefox, you can see the icon. In Chrome, it is blank.
In Chrome, <defs> must be located inside the same <svg>.
In your case:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<filter id="drop-shadow">
<feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" stdDeviation="4"/>
</filter>
</defs>
<symbol id="download-pdf">
<path filter="url(#drop-shadow)" d="" fill="">...</path>
</symbol>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download-pdf"></use>
</svg>
Conforming to modern browsers capabilities, it's easier and cleaner to create different external svg files, one for each icon, then embed them using <object> or <img> tags.
<object> lets javascript access and modify SVG code via DOM, while <img> embed SVGs denying DOM access to them. So, in your case using <img> should be a better choice.
I'd like to use an SVG image as a CSS sprite through a content property, bootstrap-style, like so:
i.rectangle-image {
content: url(rectangle.svg);
}
and here's my SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80"/>
</svg>
and proposed HTML:
<div><i class="rectangle-image"></i> Hello, world!</div>
I'd like to be able to re-colour the SVG in my application, for example to have the icon appear purple in some locations, and white in others. I know I can accomplish this by having three different SVG files (or data URIs) with the fill attribute set differently on the <rect> tag, but I'm wondering if there's a way for me to do this through CSS in my HTML?
I've tried adding a fill attribute to the i.rectangle-image selector, but that doesn't work.
I've looked at this answer and it's not quite what I want. They suggest embedding SVG throughout the page, and I'd prefer to do this via CSS content if possible. Any thoughts? Am I out of luck?
If you use the CSS content facility you're loading the SVG data basically as an image. For privacy reasons you can't affect how the image is displayed using external CSS or javascript.
If you want to change the contents of SVG data you'd either have to load it via an <object> or <iframe> tag or put it inline in the HTML file.
What abouth giving the SVG transparency and fill the background using css background color?
The sugested solution from #MMM looks great:
<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"
width="13px" height="12.917px" viewBox="0 0 13 12.917" enable-background="new 0 0 13 12.917" xml:space="preserve">
<polygon fill="#000000" points="6.504,0 8.509,4.068 13,4.722 9.755,7.887 10.512,12.357 6.504,10.246 2.484,12.357 3.251,7.887 0,4.722 4.492,4.068 "/>
<script>
document.getElementsByTagName("polygon")[0].setAttribute("fill", location.hash);
</script>
</svg>
http://jsbin.com/usaruz/2/edit
http://codepen.io/Elbone/pen/fHCjs
You can use SVG Image Editor tool to edit the colors in front end and copy the code and use it where you wanna place it, which requires short time of period.. Try it surely it will work out