Fit/Stretch SVG to div background without reescaling - css

I have this SVG file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="1px" height="100%" viewBox="64 0 1 26" enable-background="new 64 0 1 26" xml:space="preserve">
<defs>
</defs>
<path id="Outer_dark_border_1_" opacity="0.8" fill="#2F5870" d="M244,0H12C5.373,0,0,5.373,0,12v218v14v12h12h232h12v-12v-14V12
C256,5.373,250.627,0,244,0z M255,225v5v25H1v-25v-5V12.906C1,6.331,6.331,1,12.906,1h230.188C249.669,1,255,6.331,255,12.906V225z"
/>
<path id="Outer_light_border_1_" opacity="0.8" fill="#8DAFC4" d="M243.094,1H12.906C6.331,1,1,6.331,1,12.906V234v9.094V255h11.906
h230.188H255v-11.906V234V12.906C255,6.331,249.669,1,243.094,1z M254,24v230H2V24V13C2,6.925,6.925,2,13,2h230
c6.075,0,11,4.925,11,11V24z"/>
<linearGradient id="Top_gradient_2_" gradientUnits="userSpaceOnUse" x1="128" y1="24" x2="128" y2="2">
<stop offset="0.48" style="stop-color:#427B9D"/>
<stop offset="0.52" style="stop-color:#5D8EAB"/>
</linearGradient>
<path id="Top_gradient_1_" opacity="0.8" fill="url(#Top_gradient_2_)" d="M243,2H13C6.925,2,2,6.925,2,13v11h11h230h11V13
C254,6.925,249.075,2,243,2z"/>
<path id="Inner_dark_border_1_" opacity="0.8" fill="#2F5870" d="M8,25v223h240V25H8z M247,247H9V26h238V247z"/>
<path id="Inner_light_border_1_" opacity="0.8" fill="#8DAFC4" d="M7,24v225h242V24H7z M248,248H8V25h240V248z"/>
<polygon id="Solid_border_1_" opacity="0.8" fill="#427B9D" points="249,24 249,249 7,249 7,24 2,24 2,254 10,254 254,254 254,246
254,24 "/>
<rect id="top_1_" x="64" fill="none" width="1" height="26"/>
</svg>
and this HTML file:
<!DOCTYPE html>
<html>
<body>
<div style="background: url(top.svg); width: 900px; height: 100px;">
asd
</div>
</body>
</html>
and the result looks like this:
What I want is the SVG to stretch to the container. As you can see from the "asd", it only stretches the SVG horizontally, and centers vertically. I have tried to play around with dimensions and I have really no idea how to accomplish this.
So, to be clear: I want the blue bar to fill the entire div, so that ASD is in the top of it.
Update: when I change the height of the SVG from height="100%" to height="26px", then it looks like this:
I am almost there, but still not there.
and when changing width and height of svg element both to 100%, it looks like this which is not correct:


I solved my problem with CSS background-size: 100% 100%.

Related

svg disappears without rect border

I have the following svg:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg
id="dude"
version="1.1"
baseProfile="basic"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="100%"
viewBox="0 0 300 300"
preserveAspectRatio="xMidYMid meet"
class="global"
>
<style type="text/css"><![CDATA[
.global {
fill: grey;
}
.dude {
fill: white;
}
]]></style>
<rect x="0" y="0" width="300" height="300" stroke-width="0" />
<g transform="translate(150,375)">
<g class="dude" transform="scale(0.85)">
<circle cx="0" cy="-300" r="90" />
<circle cx="0" cy="-75" r="130" />
</g>
</g>
</svg>
It works fine, but the <rect> is not needed. However when I remove it then the whole svg disappears. I thought maybe its because there is no width and height. But even if I add this via CSS, the svg disappears.
https://jsfiddle.net/L5v9tpsm/
How can I get the circles and background to show, without the <rect>?

Why is my SVG image squeezed in IE11?

I'm using SVG image files with <img> tag. The image looks fine in all browsers except for IE11.
How it should look:
How it looks in IE11:
The CSS is set to width:42px; height:auto. I've tried fiddling with viewbox and height and width of the SVG itself, but nothing seems to help.
This is the code:
.st0{
fill:#7F7F7F;
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" x="0px" y="0px"
viewBox="0 0 40 40" xml:space="preserve">
<g id="_x33_A4Pmf.tif_1_">
<g>
<path class="st0" d="M38,23.3c0,0.3,0,0.6,0,0.9c0,0,0,0.1,0,0.1c0,0.3-0.1,0.6-0.1,1c-0.2,1.5-0.8,2.8-1.7,4
c-1.4,1.8-3.2,2.9-5.3,3.3c-0.7,0.1-1.4,0.2-2.1,0.2c-5.8,0-11.7,0-17.5,0c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2.1-0.6-3.1-1.2
c-1.2-0.7-2.2-1.7-3-2.9c-0.7-1.1-1.1-2.3-1.3-3.6c0-0.2,0-0.4-0.1-0.6c0-0.3,0-0.6,0-0.9c0-0.1,0-0.3,0-0.4
c0.1-1,0.3-1.9,0.7-2.8c0.4-1,1-1.8,1.7-2.6C5.2,16.8,6,16.2,7,15.7c0.1,0,0.1-0.1,0.1-0.2c0.5-1.6,1.4-3.1,2.5-4.4
c1-1.1,2.1-2,3.4-2.6c1.4-0.7,2.9-1.1,4.5-1.3c0.1,0,0.3,0,0.4,0c0.4,0,0.7,0,1.1,0c0,0,0.1,0,0.1,0c0.4,0,0.8,0.1,1.1,0.1
C21.6,7.6,23,8,24.2,8.7c2.5,1.4,4.3,3.4,5.4,6c0,0.1,0.1,0.1,0.1,0.1c0.3,0,0.5,0.1,0.8,0.1c1.2,0.2,2.2,0.6,3.2,1.2
c1.2,0.8,2.2,1.7,2.9,2.9c0.7,1.1,1.1,2.3,1.3,3.6C38,22.9,38,23.1,38,23.3z M20,29.8c3,0,6,0,8.9,0c0.4,0,0.7,0,1.1-0.1
c1.3-0.2,2.4-0.8,3.3-1.7c1.3-1.4,1.9-3.1,1.7-5c-0.2-1.3-0.7-2.4-1.6-3.3c-0.9-1-2.1-1.6-3.4-1.8c-0.4-0.1-0.8-0.1-1.2-0.1
c-0.4,0.1-0.8,0.1-1.2,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.4-0.2-0.8-0.4-1.2c-0.6-1.9-1.6-3.4-3.2-4.6c-2-1.5-4.3-2.1-6.8-1.7
c-1.5,0.2-2.9,0.8-4.2,1.8c-1.4,1.1-2.4,2.4-2.9,4c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.1-0.6,0.2-0.9,0.4
c-0.9,0.4-1.6,1-2.2,1.7C5.4,21.2,5,22.5,5,24c0.1,1.4,0.5,2.6,1.4,3.6c1.2,1.4,2.8,2.1,4.6,2.1C14,29.8,17,29.8,20,29.8z"/>
<path class="st0" d="M17,20.7c-0.9,0-1.7,0-2.6,0c1.4-1.9,2.7-3.7,4.1-5.6c1.4,1.9,2.7,3.7,4.1,5.6c-0.9,0-1.7,0-2.6,0
c0,2,0,4,0,6c-1,0-2,0-3,0C17,24.7,17,22.8,17,20.7z"/>
</g>
</g>
</svg>

I added a red box that shows the area occupied by svg
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 40 40" style="border:1px solid red;" >
Chrome
IE11
If you replace height:auto with a fixed size
svg {
width:42px;
height:42px;
}
The image will look the same in all browsers:
the second variant: add the viewport to the svg file width="40" height="40"
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="40" height="40" viewBox="0 0 40 40" style="border:1px solid red;" >
<style type="text/css">
.st0{fill:#7F7F7F;}
</style>
<g id="_x33_A4Pmf.tif_1_">
<g>
<path class="st0" d="M38,23.3c0,0.3,0,0.6,0,0.9c0,0,0,0.1,0,0.1c0,0.3-0.1,0.6-0.1,1c-0.2,1.5-0.8,2.8-1.7,4
c-1.4,1.8-3.2,2.9-5.3,3.3c-0.7,0.1-1.4,0.2-2.1,0.2c-5.8,0-11.7,0-17.5,0c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2.1-0.6-3.1-1.2
c-1.2-0.7-2.2-1.7-3-2.9c-0.7-1.1-1.1-2.3-1.3-3.6c0-0.2,0-0.4-0.1-0.6c0-0.3,0-0.6,0-0.9c0-0.1,0-0.3,0-0.4
c0.1-1,0.3-1.9,0.7-2.8c0.4-1,1-1.8,1.7-2.6C5.2,16.8,6,16.2,7,15.7c0.1,0,0.1-0.1,0.1-0.2c0.5-1.6,1.4-3.1,2.5-4.4
c1-1.1,2.1-2,3.4-2.6c1.4-0.7,2.9-1.1,4.5-1.3c0.1,0,0.3,0,0.4,0c0.4,0,0.7,0,1.1,0c0,0,0.1,0,0.1,0c0.4,0,0.8,0.1,1.1,0.1
C21.6,7.6,23,8,24.2,8.7c2.5,1.4,4.3,3.4,5.4,6c0,0.1,0.1,0.1,0.1,0.1c0.3,0,0.5,0.1,0.8,0.1c1.2,0.2,2.2,0.6,3.2,1.2
c1.2,0.8,2.2,1.7,2.9,2.9c0.7,1.1,1.1,2.3,1.3,3.6C38,22.9,38,23.1,38,23.3z M20,29.8c3,0,6,0,8.9,0c0.4,0,0.7,0,1.1-0.1
c1.3-0.2,2.4-0.8,3.3-1.7c1.3-1.4,1.9-3.1,1.7-5c-0.2-1.3-0.7-2.4-1.6-3.3c-0.9-1-2.1-1.6-3.4-1.8c-0.4-0.1-0.8-0.1-1.2-0.1
c-0.4,0.1-0.8,0.1-1.2,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.4-0.2-0.8-0.4-1.2c-0.6-1.9-1.6-3.4-3.2-4.6c-2-1.5-4.3-2.1-6.8-1.7
c-1.5,0.2-2.9,0.8-4.2,1.8c-1.4,1.1-2.4,2.4-2.9,4c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.1-0.6,0.2-0.9,0.4
c-0.9,0.4-1.6,1-2.2,1.7C5.4,21.2,5,22.5,5,24c0.1,1.4,0.5,2.6,1.4,3.6c1.2,1.4,2.8,2.1,4.6,2.1C14,29.8,17,29.8,20,29.8z"/>
<path class="st0" d="M17,20.7c-0.9,0-1.7,0-2.6,0c1.4-1.9,2.7-3.7,4.1-5.6c1.4,1.9,2.7,3.7,4.1,5.6c-0.9,0-1.7,0-2.6,0
c0,2,0,4,0,6c-1,0-2,0-3,0C17,24.7,17,22.8,17,20.7z"/>
</g>
</g>
</svg>
The third variant
If you want to leave css rule - height: auto; for the block, then add "preserveAspectRatio"
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 40 40" preserveAspectRatio="xMinYMin meet" >
<style type="text/css">
.st0{fill:#7F7F7F;}
svg {
width:42px;
height:auto;
}

How can i make an SVG-sprite tile properly in a CSS background?

I'm trying to use part of an SVG as a tiling background. However I'm having great problems making it work properly.
I think a picture will illustrate the problem best:
demonstration picture
This is my CSS:
body {
background: url("tiletest.svg#svgView(viewBox(120 32 150 64))");
background-size: 30px 32px;
}
And here is the code of the SVG I'm using for the demonstration:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg height="100" width="360" version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 360 100" style="enable-background:new 0 0 360 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:#13FF00;}
.st2{fill:#2732FF;}
</style>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="9.094947e-13" y1="9.094947e-13" x2="100" y2="100">
<stop offset="0" style="stop-color:#E7FF00"/>
<stop offset="1" style="stop-color:#FF0000"/>
</linearGradient>
<rect class="st0" width="100" height="100"/>
</g>
<polygon class="st1" points="174.68,0 190.92,32.92 227.25,38.2 200.96,63.82 207.17,100 174.68,82.92 142.19,100 148.39,63.82
122.11,38.2 158.43,32.92 "/>
<circle class="st2" cx="310" cy="50" r="50"/>
</svg>
As you can see the full viewbox in the SVG is 0 0 360 100 and when I call the SVG in the CSS I'm giving it a new viewbox of 120 32 150 64, as well as changing the background size accordingly (though I'm pretty sure this shouldn't matter anyway as the svg defined by the viewbox is supposed to expand to fill the container no matter size,right?).
I've tried fiddling with the viewbox in the SVG, with the width and height, with the preserveAspectRatio attribute, and so far nothing has worked. What am I doing wrong?

<update>
While what I wrote below is useful it did not fully fix your problem. With the proviso that Safari and iOs support is flakey, I got your code working by removing the height and width on the SVG as below:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 100">
<linearGradient id="grad" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#E7FF00"/>
<stop offset="1" stop-color="#F00"/>
</linearGradient>
<path d="M0 0h100v100H0z" fill="url(#grad)"/>
<path d="M174.68 0l16.24 32.92 36.33 5.28-26.29 25.62 6.21 36.18-32.49-17.08L142.19 100l6.2-36.18-26.28-25.62 36.32-5.28z" fill="#13FF00"/>
<circle cx="310" cy="50" r="50" fill="#2732FF"/>
</svg>
Using following html worked in Chrome, Firefox and IE11:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SVG Fragment</title>
<style type="text/css">
body {
background: url("tiletest.svg#svgView(viewBox(120,32,30,32))");
background-size: 30px 32px;
}
</style>
</head>
<body>
<h1>SVG Fragment</h1>
</body>
</html>
</update>
A couple of things, support for inline viewbox is not there in all browsers yet ... and often has quirks (see links at bottom) ... the other is that the viewbox is x-min y-min width height ... you appear to have thought it is x1 y1 x2 y2.
You should have used background: url("tiletest.svg#svgView(viewBox(120 32 30 32))"); for it to work in Chrome ... though you may need to use a view element to get it working in Firefox.
I've shown another way to implement what you want below which will work in all modern browsers (except Opera Mini and a few others). Hope it gives you some ideas.
.svg-background {
height: 200px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='120 32 30 32'%3E%3ClinearGradient id='grad' x2='100' y2='100' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23E7FF00'/%3E%3Cstop offset='1' stop-color='%23F00'/%3E%3C/linearGradient%3E%3Cpath d='M0 0h100v100H0z' fill='url(%23grad)'/%3E%3Cpath d='M174.68 0l16.24 32.92 36.33 5.28-26.29 25.62 6.21 36.18-32.49-17.08L142.19 100l6.2-36.18-26.28-25.62 36.32-5.28z' fill='%2313FF00'/%3E%3Ccircle cx='310' cy='50' r='50' fill='%232732FF'/%3E%3C/svg%3E");
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 360 100">
<linearGradient id="grad" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#E7FF00"/>
<stop offset="1" stop-color="#F00"/>
</linearGradient>
<path d="M0 0h100v100H0z" fill="url(#grad)"/>
<path d="M174.68 0l16.24 32.92 36.33 5.28-26.29 25.62 6.21 36.18-32.49-17.08L142.19 100l6.2-36.18-26.28-25.62 36.32-5.28z" fill="#13FF00"/>
<circle cx="310" cy="50" r="50" fill="#2732FF"/>
</svg>
<div class="svg-background">
</div>
Further Reading:
Mozilla Developer Network (MDN) Viewbox page
CanIUse.com svg fragment identifiers
Also check out the SVG view element which I have not looked into yet.
Definitely check out the page on CSSTricks about fragment identifers
and the fragment identifier testbed codepen

Apply a responsive SVG image mask to a HTML5 video

I have already did a one-day search before posting but with no luck
My problem:
I have a HTML5 video in a wrapper with a solid colour (e.g. blue) background (fig.1).
I want to apply a 2-colour .png 1440x900 image mask (fig. 2) over the video so to obtain, as a final result, a video with some transparent parts, corresponding to the black squares of the image mask (and the mask should scale proportionally with video, so as to be somehow responsive)
What actually happens
With the attempted solution (see below) I can see nothing (latest Chrome and Firefox): the page is completely blue coloured and the video starts
What I tried
I tried some demos found here and here but in both the examples the mask applied is not made with an image. Here's the basic code I'm trying.
<!DOCTYPE html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
body {
background: #5a91b4;
}
div {
width: 1440px;
}
video {
width: 100%;
mask:url('#imask');
-webkit-mask:url('mask.svg');
}
</style>
</head>
<body>
<div>
<video autoplay controls>
<source src="http://www.html5multimedia.com/code/media/parrots-small.mp4" type="video/mp4">
<source src="http://www.html5multimedia.com/code/media/parrots-small.webm" type="video/webm">
</video>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 900">
<defs>
<mask id="imask" >
<image width="1440" height="900" xlink:href="http://copy.com/TCImDzmSoq8CrU8W/mask.png"></image>
</mask>
</defs>
</svg>
</body>
</html>
The mask.svg file:
<?xml version="1.0" standalone="no"?>
<!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="vmask" preserveAspectRatio="xMinYMin"
viewBox="0 0 1440 900"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask>
<image width="1440" height="900" xlink:href="http://copy.com/TCImDzmSoq8CrU8W/mask.png"></image>
</mask>
</defs>
</svg>
I'm also open to evaluate a different approach to obtain the same effect.
Thank you in advance guys

If you convert your mask in pure SVG, it will work line in this demo http://jsbin.com/xejiko/1/edit
The svg is at http://jsbin.com/laday/1/edit
This is the mask.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 1440 899" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(720.000000, 449.000000) scale(1, -1) translate(-720.000000, -449.000000) " fill="#000000">
<path d="M0,830.648889 L0,-0.00222222222 L1440,-0.00222222222 L1440,830.65 L1440,853.1 L1440,898 L810,898 L180,898 L90,897.997778 L45,898 L0,898 L0,830.648889 L0,830.648889 Z M0,830.648889 L0,897.997778 L90,897.997778 L90,853.1 L90,808.2 L135,808.2 L180,808.2 L180,853.1 L180,897.997778 L1440,897.997778 L1440,830.65 L1440,808.2 L810,808.2 L180,808.2 L180,763.3 L180,718.4 L135,718.4 L90,718.4 L90,673.5 L90,628.6 L45,628.6 L0,628.6 L0,763.3 L0,830.648889 L0,830.648889 Z M1080,224.5 L1080,179.6 L1125,179.6 L1170,179.6 L1170,224.5 L1170,269.4 L1125,269.4 L1080,269.4 L1080,224.5 Z M1350,224.5 L1350,179.6 L1305,179.6 L1260,179.6 L1260,134.7 L1260,89.8 L900,89.8 L540,89.8 L540,44.9 L540,0 L990,0 L1440,0 L1440,134.7 L1440,269.4 L1395,269.4 L1350,269.4 L1350,224.5 Z M0,44.9 L0,0 L135,0 L270,0 L270,44.9 L270,89.8 L135,89.8 L0,89.8 L0,44.9 Z" id="Rectangle-1"></path>
</g>
</g>
</svg>
And in the css you call it
-webkit-mask-box-image: url(urlto/mask.svg)

Not sure about SVG but in CANVAS this would be easy. All you need to do is do is copy the video to the canvas and do the source-atop http://codepo8.github.io/canvas-masking/
Of course you'll run into the issue that you can not access the video that is not on the same domain :/

how can I put emboss style on SVG element on hover using css

here's my css style
<style>
#asia > path:hover {
fill: red;
}
</style>
and heres the SVG element:
<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="800px" height="500px" viewBox="0 0 800 500" enable-background="new 0 0 800 500" xml:space="preserve">
<g transform="translate(0,239) scale(0.016963,-0.016963)" id="asia">
<path fill="" d="M39736.762-6721.546c-23.949-35.866-47.898-97.409-51.293-136.729
c-5.125-37.651-17.098-85.492-27.348-104.317c-10.246-20.495-17.098-66.667-13.699-102.533c3.453-59.815,8.578-68.393,53.02-76.914
c52.965-10.248,165.805,32.47,165.805,61.542c0,11.975,8.578,11.975,22.219,0c17.102-13.702,34.199-6.851,68.395,30.742
c25.617,25.677,46.113,59.815,46.113,75.245c0,15.371,13.703,27.346,32.527,27.346c20.496,0,39.32,15.371,46.113,39.32
c6.852,20.495,29.074,64.939,51.297,99.136c53.02,83.765,30.801,102.533-83.766,70.063c-150.43-40.99-155.555-40.99-191.422-8.521
c-18.824,18.768-41.047,35.866-51.293,40.99c-8.578,3.454-15.371,17.098-11.977,29.073
C39799.977-6641.178,39784.605-6654.88,39736.762-6721.546z"/>
</g>
</svg>
I want to add bevel and emboss style when I hover the path tag. I already read related topics and it seems that css emboss is not working on svg element. Any comments or suggestions appreciated.

Use an SVG filter to achieve your emboss effect and apply it on hover.
<svg width="7.5cm" height="5cm" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="MyFilter" ...>
[...snip...]
</filter>
</defs>
<path fill="#D90000" class="button"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
</svg>
CSS:
.button:hover {
filter: url(#MyFilter);
}
Demo here
Note that SVG filters will not work on versions of IE <10.

Resources