I am using just one icon from the ratchet collection (http://goratchet.com/components/). I was wondering if I can embed the SVG definition of the icon directly into my '.css' file.
I.e. something like..
.tick {
background-repeat: no-repeat;
background-size: contain;
background-image: url("data:image/svg+xml ... *svg-definition-in-here* ...
}
The code for the icon of interest from ratchicons.svg is ...
<glyph glyph-name="check" unicode="" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />
If you embed the glyph data in a path and transform it so it's the other way up you get this.
html, body, svg {
width : 100%;
height: 100%;
display: block;
margin: 0;
border: 0;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -900 900 900">
<path transform="scale(1, -1)" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z"/>
</svg>
Then all you need to do is embed it...
.tick {
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-size: contain;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -900 900 900"><path transform="scale(1, -1)" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z"/></svg>')
}
<div class="tick"></div>
An alternative to Robert Longson's answer would be to use the <foreignObject> method which is supported in most modern browsers apart from IE.
<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet" />
<svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100" height="50">
<body xmlns="http://www.w3.org/1999/xhtml">
<span class="icon icon-check"></span>
</body>
</foreignObject>
</svg>
<foreignObject> on MDN
Related
Why blend mode works on a normal image (img tag) but not inside an svg (image tag)?
Look at the example below to understand what I'm trying to achieve (I also want to keep the background clipped like the first image):
.image-wrapper {
width: 100%;
background: #70C053;
}
.image-wrapper image {
filter: grayscale(100%);
mix-blend-mode: multiply;
}
img {
width: 100%;
height: auto;
filter: grayscale(100%);
mix-blend-mode: multiply;
}
<div class="image-wrapper">
<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="user-space" clipPathUnits="userSpaceOnUse">
<path fill="#FF0066"
d="M49.5,-65.4C58.2,-51.8,55.1,-30.5,54.2,-12.9C53.4,4.7,54.7,18.5,49.1,28.6C43.6,38.6,31.1,44.8,17.6,50.9C4.1,57,-10.5,62.8,-22.5,59.5C-34.5,56.1,-44.1,43.5,-53.7,29.7C-63.3,15.8,-73,0.6,-73.4,-15.7C-73.8,-32,-65,-49.4,-51.2,-62.2C-37.4,-75,-18.7,-83.1,0.9,-84.1C20.4,-85.2,40.9,-79.1,49.5,-65.4Z"
transform="translate(100 100)"></path>
</clipPath>
</defs>
<image width="100%" height="auto" preserveAspectRatio="xMinYMin slice" xlink:href="https://source.unsplash.com/random"
clip-path="url(#user-space)"/>
</svg>
</div>
<div class="image-wrapper">
<img src="https://source.unsplash.com/random">
</div>
The MDN docs have an example.
See here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#using_mix-blend-mode_with_svg
I need to create a set of 3 triangles that each have content in them (images, copy, etc).
I have setup this Pen to show roughly what I'm trying to achieve: https://codepen.io/andystent/pen/OJyNdmB
And here is an image for quick reference:
In this example the "Top" and "Left" triangles are IMAGES with the clip-path applied and displaying perfectly.
The "Right" triangle (with the red background) is a DIV with the clip-path applied but the proportions are wrong.
It should look like a mirrored version of the "Left" triangle.
When I apply it to an image it is perfect but when I apply to the div it is not. What is the best way to do this?
I am new to SVG so it is extremely likely that I am not doing this correctly. I have looked at numerous posts and the method I have tried is from a few of those but without success... so now I'm reaching out to you geniuses...
Here's the HTML and CSS for the red "Right" triangle with the clip applied to the DIV in the CSS:
#right-wrapper {
position: absolute;
width: 50%;
height: 100%;
right: 0;
padding: 40px 20px;
box-sizing: border-box;
}
#right-content-div {
background-color: red;
height: 100%;
width: 100%;
position: absolute;
top: 0;
right: 0;
clip-path: url(#clip-path-right);
-webkit-clip-path: url(#clip-path-right);
display: flex;
justify-content: center;
align-items: center;
}
<div id="right-wrapper">
<svg width="100%" height="100%" viewBox="0 0 1220 1214" preserveAspectRatio="none">
<defs>
<clipPath id="clip-path-right">
<path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
</path>
</clipPath>
</defs>
<div id="right-content-div" preserveAspectRatio="none">
<h1>test heading</h1>
</div>
<!-- <image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" /> -->
</svg>
</div>
----- UPDATE: -----
As suggested in the comments, I have created a simplified Pen that gets to the heart of what I'm trying to achieve and the embedded HTML and CSS is below.
Essentially I am trying to get the red <div> to be clipped exactly like the <image>.
https://codepen.io/andystent/pen/RwWRjLd
#right-content-div {
background-color: red;
height: 100%;
width: 100%;
position: absolute;
top: 0;
clip-path: url(#clip-path-right);
-webkit-clip-path: url(#clip-path-right);
}
<svg width="20%" height="20%" viewBox="0 0 1220 1214">
<defs>
<clipPath id="clip-path-right">
<path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
</path>
</clipPath>
</defs>
<image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" />
</svg>
<div id="right-content-div" preserveAspectRatio="none">
<h1>test heading</h1>
</div>
Here is an idea where I will be using mask instead of clip-path. The main trick to correctly set the viewBox (you already have it in your code) add preserveAspectRatio="none" then have a mask size of 100% 100%
.box {
width:200px;
height:200px;
display:inline-block;
background:red;
}
.mask {
-webkit-mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
}
<div class="box mask"></div>
<div class="box mask" style="width:300px;"></div>
<div class="box mask" style="height:300px;"></div>
<img src="https://i.picsum.photos/id/1074/200/200.jpg" class="mask">
I'm trying to create an Angular 5 app that consists of a masked/clipped image.
In plain ol' HTML + CSS, I can achieve what I want with the following code pen: https://codepen.io/earthican/pen/BJjgRv
body,
html,
.img {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: white;
overflow: hidden;
}
svg {
pointer-events: none;
width: 100%;
height: 100%;
position: absolute;
background: transparent;
fill: transparent;
mask: url(#polygon-mask);
}
<svg id="mask">
<defs>
<mask id="polygon-mask" x="0" y="0" width="960" height="588" >
<rect id="reverse-mask" fill="white" x="0" y="0" width="960" height="588" ></rect>
<polygon fill="red" points="112,62 162,112 162,162 62,162 62,112"></polygon>
</mask>
</defs>
<rect width="960" height="588" fill="teal"></rect>
</svg>
<div class="img">
<img src="https://i.pinimg.com/originals/53/5e/5b/535e5b3744dbb8264a7ebba5f29f44ca.jpg" style="margin-left: 0px; margin-top: 0px;">
</div>
However, I'm having trouble trying to convert the above to Angular. Here's what I have so far: https://plnkr.co/edit/w2gVe91NEIdUlCWs3qkN?p=preview
I think I'm starting to realize that Angular doesn't play very well with SVG. I should also point out that I'm fairly new to Angular 2+ and SVG, so I can't really be sure. If anyone can help or point out some useful resources, that will be greatly appreciated!
I have solved this by moving the mask attribute from CSS to the SVG tree, i.e.:
<svg mask="url(#polygon-mask)">
...
</svg>
Can anyone explain why firefox crops this SVG image?
It's within a container and being scaled to fit by CSS.
I'm using <symbol> and <use>.
.container {
width: 1em;
height: 1em;
}
svg {
width: 100%;
height: 100%;
}
<svg style="display:none">
<symbol id="icon_triangleup" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<path d="M12.8,5.4c-0.377-0.504-1.223-0.504-1.6,0l-9,12c-0.228,0.303-0.264,0.708-0.095,1.047 C2.275,18.786,2.621,19,3,19h18c0.379,0,0.725-0.214,0.895-0.553c0.169-0.339,0.133-0.744-0.095-1.047L12.8,5.4z" />
</symbol>
</svg>
<div class="container">
<svg>
<use xlink:href="#icon_triangleup"></use>
</svg>
</div>
I can tell you why, as in, how to fix it. But not why Chrome seems to ignore what's causing the issue in Firefox.
Firefox is using the 24px width and height set on the <symbol> element, so remove those and the symbol will expand to fill the space of it's container.
You can always set the width and height on the <use> element if you want the individual instances of the symbol to be different sizes.
.container {
width: 1em;
height: 1em;
}
svg {
width: 100%;
height: 100%;
}
<svg style="display:none">
<symbol id="icon_triangleup" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12.8,5.4c-0.377-0.504-1.223-0.504-1.6,0l-9,12c-0.228,0.303-0.264,0.708-0.095,1.047 C2.275,18.786,2.621,19,3,19h18c0.379,0,0.725-0.214,0.895-0.553c0.169-0.339,0.133-0.744-0.095-1.047L12.8,5.4z" />
</symbol>
</svg>
<div class="container">
<svg>
<use xlink:href="#icon_triangleup"></use>
</svg>
</div>
I wanted to use scaled svg images as icons of different sizes, but found inconsistent behaviors in firefox.
Without css sprite, firefox would anti-alias the scaled images. But with css sprite, firefox would not anti-alias them. Therefore, The icons looked ugly with css sprite.
Please visit this jsfiddle for details. What's the problem with firefox?
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.whole {
width: 80px;
height: 80px;
background-image: url("outliner.svg");
background-size: 100% 100%;
}
i {
width: 16px;
height: 16px;
display: inline-block;
background-image: url("outliner.svg");
background-size: 500% 500%;
}
.circle { background-position: -32px 0;}
.disk { background-position: 0 -16px; }
</style>
</head>
<body>
<div>With CSS Sprite:</div>
<i class="circle"></i><i class="disk"></i>
<div>Without CSS Sprite:</div>
<i class="whole"></i>
</body>
</html>
Currently, there is no CSS method to change the rendering mode of SVG elements, though there is an SVG attribute that can do so: shape-rendering.
I went ahead and ran your SVG file through a base64 encoder (which you can use to decode the data in the following examples), after adding shape-rendering: <value> to each of your <g> elements, where <value> has several options: optimizeSpeed (example), crispEdges (example), and geometricPrecision (example).
Depending on how you want your final SVG to display, just choose one of the particular values, and your final SVG code will look somewhat like the following (note the shape-rendering attribute on each of the <g> tags):
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480">
<g shape-rendering="crispEdges" stroke="#333" fill="#333">
<g shape-rendering="crispEdges" id="icon-1-1" transform="translate(0,0)">
<line x1="10" y1="10" x2="86" y2="86" stroke-width="12"/>
<line x1="10" y1="86" x2="86" y2="10" stroke-width="12"/>
</g>
<g shape-rendering="crispEdges" id="icon-1-2" transform="translate(96,0)">
<!-- svg continues below ... -->