i want to put an svg inside the .container div created with the following code so that it fits exactly to the dimensions of the .container div but still scales with the size of the page as it is resized:
<html>
<body>
<style type='text/css'>
.container
{
position:relative;
width:50%;/*half the width of the whole page*/
margin:auto;/*center the whole thing*/
}
.set_height
{
padding-bottom:50%;/*2:1 aspect ratio*/
position:relative;
float:left;
width:100%;
height:100%;
}
</style>
<div class='container'>
<div class='set_height' style='background-color:blue;'>
</div>
</div>
</body>
</html>
a rectangular svg with an aspect ratio of 2:1 will do for the purposes of this question:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="50" stroke="black" fill="red" stroke-width="5"/>
</svg>
however when i do this, it messes up the aspect ratio of the .container div. using chrome the .container div height expands out to 100%, which is obviously not what i want :P
thanks in advance!
I think I got it. I just put an absolute div within the .container div:
.on_top
{
position:absolute;
top:0;left:0;bottom:0;right:0;/*expand this div to the size of its parent*/
}
<div class='set_width'>
<div class='on_top'>
<svg viewBox="0 0 100 50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="50" stroke="black" fill="red" stroke-width="5"/>
</svg>
</div>
<div class='set_height'></div>
</div>
and I used viewbox on the svg as ali gajani suggested
I think you need to use the viewbox attribute: http://www.w3.org/TR/SVG/coords.html#ExampleViewBox
Check this, it scales now: http://jsfiddle.net/NKRPe/60/
<svg viewBox="0 0 1500 1000" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="50" stroke="black" fill="red" stroke-width="5"/>
</svg>
Related
I'm having a problem coverting inline SVG to be wrapped in divs. I was using nested SVGs before and now I'm told I have to use nested divs with inline SVG.
Basically, I need the SVG to be sized to the "container" - the "container" is size to the browser window.
For an example of what works before I tried the whole div thing:
SVG Only Example - works perfectly
<html>
<body>
<svg id="container" style="position:relative;border:dashed;width:100%;height:100%;" viewBox="0 0 1000 500">
<svg id="background" name="Box" x="0" y="0">
<rect width="1000" height="500" stroke="lime" fill="blue" stroke-width="10" />
<svg id="shape" name="Triangle" x="275" y="50" fill="red" stroke="yellow" stroke-width="3">
<path d="M0,378L185,0L371,378Z" />
</svg>
</svg>
</svg>
</body>
</html>
But when I try to wrap divs around them, it just stays the same size as my viewBox, no matter what I've tried. I've looked up a lot on this on SO and elsewhere and nothing seems to work: padding tricks, 100vw, width, height, etc.
Here's the latest of what I've tried:
SVG wrapped in DIV Example - doesn't behave the same
<html>
<body>
<div id="container" style="position:relative;border:dashed;width:100%;height:0;margin:5px">
<div id="background" style="position:absolute;left:0px;top:0px;width:1000px;height:500px;">
<svg name="Box" viewBox="0 0 1000 500">
<rect width="1000" height="500" stroke="lime" fill="blue" stroke-width="10" />
</svg>
<div id="shape" style="position:absolute;left:275px;top:50px;width:371px;height:378px;">
<svg name="Triangle" viewBox="0 0 371 378" fill="red" stroke="yellow" stroke-width="3">
<path d="M0,378L185,0L371,378Z" />
</svg>
</div>
</div>
</div>
</body>
</html>
I put a "border:dashed;" in the first div, just to make sure it is resizing with the browswer window and it is. It's just that everything inside that div doesn't change.
Any advice on how to get the "wrapped in div" strategy to match the "plain SVG" strategy?
More clarity:
I guess what I'm saying is that "background" shape needs to be 1000w x 500h, relative to the "container" size. Any of it's children need to be absolutely positioned inside of that 1000w 500h and relative to it. The "container" size is the available space. So if if the browser window is 3000w x 2000h, then technically the "background" shape should be 3000w x 1500h (and the child shapes resize accordingly too - but the stay in their original relative position - relative to 1000w x 500h). If the window 800 w by 600 h, the "background" and child shapes shrink to fit that, relatively. Just like the SVG example.
It might be helpful to take the SVG example above, save it as an html file, launch locally and resize your browser up and down. That's what I'm to find help with, but divs don't seem to know how to handle this.
There's no real equivalent to viewBox property of SVG on DIV elements. The closest one would transform scale. So if you give your div containers a specific size in pixel without adjusting on resize, you're going to somewhat override the viewbox calculations.
That being said, if your div containers are resized with the window, then it can work. Also with minimal javascript you can get the same result as viewbox.
For the css only solution, you define your div containers so they are 100% the size of the window. The SVG viewbox is then still making the calculations. You'll need to define a preserveAspectRatio to have the same behavior as your SVG example. Like this:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin:0px;
}
* {
box-sizing: border-box;
}
<div id="container" style="position:relative;border:dashed;width:100%;height:100%;">
<svg name="Box" style="position:relative;width:100%;height:100%;" viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin">
<rect width="100%" height="100%" stroke="lime" fill="blue" stroke-width="10" />
</svg>
<div id="shape" style="position:absolute;left:0px;top:0px;height:100%;width:100%;">
<svg style="position:relative;width:100%;height:100%;" viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin">
<svg id="shape" name="Triangle" x="275" y="50" width="371" height="378" fill="red" stroke="yellow" stroke-width="3">
<path d="M0,378L185,0L371,378Z" />
</svg>
</svg>
</div>
</div>
For the javascript solution, you define the size on your div containers, and your svg can then be relative and not have the positioning info. And on resize you adjust the scale based on the innerWidth. Like this:
window.onload = window.onresize = calculateScale
function calculateScale() {
var scaleFactor = innerWidth / 1000;
document.getElementById('container').style.transform = `scale(${scaleFactor})`
}
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
* {
box-sizing: border-box;
}
<div id="container" style="position:absolute;border:dashed;width:1000px;height:500px;transform-origin: left top">
<svg name="Box" style="position:relative;width:100%;height:100%;">
<rect width="100%" height="100%" stroke="lime" fill="blue" stroke-width="10" />
</svg>
<div id="shape" style="position:absolute;width: 371px;height: 378px;top: 50px;left: 275px;">
<svg style="width: 100%; height: 100%" id="shape" name="Triangle" fill="red" stroke="yellow" stroke-width="3">
<path d="M0,378L185,0L371,378Z" />
</svg>
</div>
</div>
I think I got what you are looking for but this is two different svgs not the same vector image.
I'm wrapping both svgs with a div and im overlaying the second div using an absolute position.
<html>
<body>
<div id="containerouter" style="position:relative;border:dashed;width:100%;height:100%;margin:0;">
<div id="background" style="position:relative;width:100%;height:100%;">
<svg name="Box" viewBox="0 0 1000 500">
<rect width="1000" height="500" stroke="lime" fill="blue" stroke-width="10" />
</svg>
</div>
<div id="shape" style="position:absolute;height:100%; width:auto;left:175px;top:10%;">
<svg name="Triangle" viewBox="0 0 371 378" fill="red" stroke="yellow" stroke-width="3" x="0" y="0" height="75%">
<path d="M0,378L185,0L371,378Z" />
</svg>
</div>
</div>
</body>
</html>
Like this?
<html>
<body>
<div class="container" style="width:100%; height:100%;">
<div class="container" style="width:100%; height:100%;">
<svg id="container" style="position:relative;border:dashed;width:100%;height:100%;" viewBox="0 0 1000 500">
<rect width="100%" height="100%" stroke="lime" fill="blue" stroke-width="10" />
<foreignObject x="275" y="50" width="371px" height="378px">
<div class="container" style="width:100%; height:100%;">
<svg id="shape" name="Triangle" x="0" y="0" fill="red" stroke="yellow" stroke-width="3" width="100%" height="100%">
<path d="M0,378L185,0L371,378Z" />
</svg>
</div>
</foreignObject>
</svg>
</div>
</div>
</body>
</html>
EDIT: Changed the snippet.
This version uses a <foreignObject> to wrap the inner svg with a div element. Outcome is as expected.
If you are trying to have something like this:
<div>
<div>
<svg> <!-- rect --> </svg>
</div>
<div>
<svg> <!-- triangle --> </svg>
</div>
</div>
Then you'll need to overlay the divs on top of one another and you can't manipulate the svg any further
I try to draw a svg in my HTML Code to have a specific path/object with an background image.
The object should be a little bit responsive (using bootstrap), but filled with the image and the image should preseve its ratio.
<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="none" >
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
<image xlink:href="images/headerBackground.png" x="0" y="0" width="1153" height="680" />
</pattern>
</defs>
<path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
</svg>
You can see it here in the live demo:
https://liveweave.com/N5nib6
https://jsfiddle.net/zyyvd86g/
Maybe anybody can help? I hope the problem is clear enough.
You can use max-width:100% for the svg element and div element wrap on this svg.
You can get the responsive image
div {
width: 80%;
height: auto;
margin: 0 auto;
}
svg {
max-width: 100%;
height: auto;
}
<div>
<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="none" >
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
<image xlink:href="images/headerBackground.png" x="0" y="0" width="1153" height="680" />
</pattern>
</defs>
<path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
</svg>
</div>
IMO opinion, the simple solution to your problem is to use a different preserveAspectRatio on your SVG.
Using preserveAspectRatio="none" is going to stretch your SVG and cause problems.
I'm assuming you want to keep the shape of the "swoop" on the bottom of your path. Correct?
If that is the case, you might prefer to use
preserveAspectRatio="xMidYMax slice"
instead. This scales the SVG up to fill the full width of the SVG viewport, whilst keeping the aspect ratio the same, and keeping the bottom of the SVG viewBox on screen.
<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="xMidYMax slice">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
<image xlink:href="http://lorempixel.com/1153/680/" x="0" y="0" width="1153" height="680" />
</pattern>
</defs>
<path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
</svg>
I'm trying to get svg image to scale nicely (http://coub.com/view/5tbis) with sibling div content so that they'd look like one thing. I managed to get it working in fireforx but not in chrome and ie, all latest versions. Here is my code:
<!DOCTYPE html>
<html>
<body>
<div style="display: flex; height: 10em;">
<div style="height: 100%">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 100%; height: 100%; " viewBox="0 0 400 400">
<rect x="0" y="0" width="400" height="200" fill="yellow" stroke="black" />
<rect x="0" y="200" width="400" height="200" fill="green" stroke="black" />
<circle cx="200" cy="200" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
<div style="display: flex; flex-direction: column; width: 100%">
<div style="flex: 1; background-color: green"> </div>
<div style="flex: 1; background-color: yellow"> </div>
</div>
</div>
</body>
</html>
In IE and Chrome there is a blank space around svg and in Chome, svg proportions does not always match divs' ones.
Any help is highly appreciated.
UPDATE: ok, preserveAspectRatio="none" fixes the problem for ie and chrome, but I still don't understand why do they behave in this way? The wrapper div do not have width, why svg then doesn't change it according its own width?
UPDATE: preserveAspectRatio="xMidYMid slice" makes it even better, but only for ff and ie
Two mysteries, or maybe they are the same. All the rectangles in the below are filling in for graphics, which have been removed to simplify the description.
Mystery #1: A height for #mbfluid is given, but it is not honored. The #mbfluid rectangle should grow dynamically based on the width of #mbsvg. So mystery #1 is why the height is not honored.
Note that if I give explicit widths for either or both #mbsvg in the CSS or #mbfluid as an attribute, the height is still not honored. Note that the syntax for the height specification for #mbfluid is exactly the same as for #mbfixed which is the expected height. I expected the width of #mbsvg to be the same as its parent, and that would be OK... but in the debugger, #mbfluid is reported as having a huge width. But specifying a width for it doesn't seem to fix the height. Submystery #1 would be how to specify the width of #mbfluid so that it starts 10pt from the left, and extends to the right edge of the containing #mbsvg. I don't think I can use CSS calc for this as width cannot presently be specified via CSS, and I didn't find a similar capability for SVG attributes. But if the height can be fixed, I don't probably care much about the width, as long as it is big enough.
Mystery #2: #mbsvg has a couple sibling divs containing nowrap text. I would like #mbsvg to be the same width as whichever line of text is wider. Multiple instances of #mbsvg will be used with different lines of text, having different widths, and I'm trying to make one #mbsvg that can work in those different locations. I've no idea how to specify the CSS to cause the size of #mbsvg to inherit the size of the wider of the two lines of text. A javascript solution would suffer from the multitude of such groupings expected to be on the page (maybe 500 on the biggest page), and further, the lines of text may be individually switched on and off (one or both being visible) using CSS, so the javascript would have to be rerun, and know which ones are visible, in order to discover the proper size to make the #mbsvg. This system is already functioning nicely, with a fixed-width variety of the #mbsvg, but the responsive #mbsvg would make it much more attractive.
Edit: (regarding Mystery #1) Experimenting more, tried making the height bigger, and exactly 10 times bigger displayed as desired. But this link says that x, y, height, and width attributes use the parent coordinate space, so this looks like a bug... but if so, it is in all the browsers (and at least IE doesn't share all the same SVG code, because it shows a wider #mbsvg, and doesn't crop #mbfluid to the boundary of #mbsvg), because they all show it. The only factor of 10 nearby is in the viewbox aspect ratio, and changing that has an impact, in spite of what it says at the link, which is supposed to be the standard. So now the problem is if I workaround this, how can I do it so that it is immune to the browser vendors fixing this bug (at least, it presently seems to me to be a bug)?
.mbsvg
{
position: relative;
height: 49pt;
background-color: #80ffff;
}
.mbsized
{
height: 100%;
}
.nowrap
{
white-space: nowrap;
}
<svg height="0"><defs>
<rect id="r1" x="0" y="0" height="10" width="10" />
<rect id="r2" x="0" y="0" height="10" width="100" />
<rect id="r3" x="0" y="0" height="250" width="85" />
</defs></svg>
<div>
<div class="nowrap">This is some text</div>
<div class="nowrap">This is some other text</div>
<svg class="mbsvg">
<use xlink:href="#r1" fill="red"/>
<svg class="mbfluid" x="10pt" y="16pt" height="17pt"
viewbox="0 0 10 100" preserveAspectRatio="none">
<use xlink:href="#r2" fill="yellow"/>
</svg>
<svg class="mbfixed" x="0" y="16pt" height="17pt" width="10pt"
viewbox="0 0 10 10" preserveAspectRatio="none">
<use xlink:href="#r1" fill="blue"/>
</svg>
<svg class="mbsized"
viewbox="0 0 83 250" preserveAspectRatio="xMidYMid meet">
<use xlink:href="#r3" fill="green"/>
</svg>
</svg>
</div>
OK, here is a solution that works for me, but only because the height of the #mbsvg is fixed, which I neglected to mention, although it was shown in the CSS. I found the technique here and have revised it to fit this situation.
The trick is to make #mbsvg an absolutely positioned child of the outer div, and give it a width of 100%. Because it is absolutely positioned, it gets demoted from contributing to the size of the parent, so the other items determine that size (since the parent is floated, it is shrink-to-fit) which is then inherited by #mbsvg. The other items can even be below #mbsvg, as I demonstrated by moving one line of text below it (using a filler div of the same height as #mbsvg to achieve that).
Edit I had length and width swapped in the viewbox value. Turned them around and mystery #1 is totally resolved.
.mbsvg
{
position: relative;
height: 49pt;
background-color: #80ffff;
}
.mbsized
{
height: 100%;
}
.nowrap
{
white-space: nowrap;
}
.flex
{
position: relative;
float: left;
}
.flex > svg
{
position: absolute;
width: 100%;
}
.svgfiller
{
height: 49pt;
}
<svg height="0"><defs>
<rect id="r1" x="0" y="0" height="10" width="10" />
<rect id="r2" x="0" y="0" height="10" width="100" />
<rect id="r3" x="0" y="0" height="250" width="85" />
</defs></svg>
<div class="flex">
<div class="nowrap">This is some text</div>
<svg class="mbsvg">
<use xlink:href="#r1" fill="red"/>
<svg class="mbfluid" x="10pt" y="16pt" height="17pt"
viewbox="0 0 10 10" preserveAspectRatio="none">
<use xlink:href="#r2" fill="yellow"/>
</svg>
<svg class="mbfixed" x="0" y="16pt" height="17pt" width="10pt"
viewbox="0 0 10 10" preserveAspectRatio="none">
<use xlink:href="#r1" fill="blue"/>
</svg>
<svg class="mbsized"
viewbox="0 0 83 250" preserveAspectRatio="xMidYMid meet">
<use xlink:href="#r3" fill="green"/>
</svg>
</svg>
<div class="svgfiller"></div>
<div class="nowrap">This is some other text</div>
</div>
Mystery #1: resolved by using an aspect ratio of 1 for the #mbfluid viewbox value... I can deal with that in the real innards of #mbfluid, with a few changes. Edit I had length and width swapped in the viewbox value. Turned them around and mystery #1 is totally resolved.
Mystery #2: resolved by using wrapping it table-row and using table-cell for each item... seems Firefox (only) figures out that #mbsvg is content to live within the width of the other rows. Since the other browsers do not, this is not a sufficient answer, so will not be marked accepted.
.mbsvg
{
position: relative;
height: 49pt;
background-color: #80ffff;
}
.mbsized
{
height: 100%;
}
.nowrap
{
white-space: nowrap;
}
.flex > div
{
display: table-row;
}
.flex > div > div
{
display: table-cell;
}
.flex > div > svg
{
display: table-cell;
}
<svg height="0"><defs>
<rect id="r1" x="0" y="0" height="10" width="10" />
<rect id="r2" x="0" y="0" height="10" width="100" />
<rect id="r3" x="0" y="0" height="250" width="85" />
</defs></svg>
<div class="flex">
<div><div class="nowrap">This is some text</div></div>
<div><div class="nowrap">This is some other text</div></div>
<div><svg class="mbsvg">
<use xlink:href="#r1" fill="red"/>
<svg class="mbfluid" x="10pt" y="16pt" height="17pt"
viewbox="0 0 10 10" preserveAspectRatio="none">
<use xlink:href="#r2" fill="yellow"/>
</svg>
<svg class="mbfixed" x="0" y="16pt" height="17pt" width="10pt"
viewbox="0 0 10 10" preserveAspectRatio="none">
<use xlink:href="#r1" fill="blue"/>
</svg>
<svg class="mbsized"
viewbox="0 0 83 250" preserveAspectRatio="xMidYMid meet">
<use xlink:href="#r3" fill="green"/>
</svg>
</svg></div>
</div>
I've got an svg image which I want to autoresize to 100% width.
The problem is, that I've placed an Image (100px x 100px) on the left side of that svg and that picture has to keep its proportions.
I tried it with viewBox, but with this method the whole svg, and not only the path, gets resized.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 100" preserveAspectRatio="none" style="-webkit-user-select: auto;">
<g>
<title>title</title>
<image x="0" y="1.00001" width="100" height="100" id="svg_1" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3goUDAEUe/ATzgAAAkNJREFUeNrtnetugkAQRr8hJH3/tzWt7PRHxQuyN4qw6DlJo7GK7Jy9zdBQkxS0DJPkl0e44ZPYVMVo/AA0QkcIEAIIQQggBCGAEIQAQhAypvtk7A0wVzqhPtWYENiRnhBU4QWdu/SREVIQ7Np4eIGU1Pe4bpc/XJL39O6H33kigKnjWOYYc8d0SYOks6Sfy0/oF/aCIwW89HWfPO9merMSvT62IYq9dv/8W9JJ0qkvbKQ1OLXkgloiJLXLnLbdIlNTbrqyzDIRJH2N0o+2hnjlSPbKxVcrvL+2PePUNUgajiLEC4OlfwZsrxzsOuW1LGTt3khiCPVQXEQIIAQhgJA3oala1t2Wb0mhb6tTbG7b65mEzUoacF9XeHpT12kIYdgwwLaXgP8IydV8Hhpgk8bEsrtoRMw0uJ8nyWG4TLNBZdcdUh3FWhCwVEhp0c5iMnKtjUXHzRTcBy274FMS9FaqAP7XDZfP075WDyupj/h660nT5RhKJ2x7ASEIAYQgBBDyASytZXks+atJ/GqTHIRUxCn2dzmGhKdsXIniRd/KWb5RwEsmClt7yio+C4+MljcdDVYzGmIHoHTCLgsQghBACEIAIQgBhCAEEAIIQQggBCGAEIQAQhACCAGEIAQQghBACEIAIQgBhABCEAIIQQggBCGAEIQAQgAhCAGEHBT+bd4LuNyNwTPvud7ZwZ8/CxvxcCvYuVuNvFRI6sYf0MAagowd1hBbWYR9mOBNpixGRiNCgDwEIYAQhABCEAIIAYS0zy9dWbdrK07bIAAAAABJRU5ErkJggg=="/>
<path style="-webkit-user-select: auto;" stroke="#000000" fill="#FF0000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m98.66982,67.61566c0,0 136.5026,-1.32306 303.78312,-30.42615c167.28064,-29.10306 238.87799,-14.55161 238.20886,-14.55161c-0.66913,0 1.33826,79.37253 1.33826,79.37253c0,0 -543.33026,1.32291 -543.99939,1.32291c-0.66912,0 0.66915,-35.71768 0.66915,-35.71768z" id="svg_10"/>
</g>
</svg>
For using the svg I've got
<div class="svg">
<p>tesygst</p>
</div>
and
.svg {
background: url(pathToSvg.svg) no-repeat bottom left;
position : fixed;
bottom : 0;
left : 0;
height : 100px;
width : 100%;
}
The img has to be placed at the left bottom corner, while the path has to extend itself to 100% width starting at the end of that pic.
Hope somebody can help me :/
You can't put an image inside an SVG, stretch the SVG and have the image not stretch also. That's just how things work. You have to think of the contents of the SVG just the same as if you were talking about an <img> rather than an SVG. You stretch the img, the whole thing stretches.
I take it you are trying to keep the image at 100x100px?
You will need to move the image out of the SVG and into the HTML. Then position it in the right place with CSS. For example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 100" preserveAspectRatio="none" style="-webkit-user-select: auto;">
<g>
<title>title</title>
<path style="-webkit-user-select: auto;" stroke="#000000" fill="#FF0000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m98.66982,67.61566c0,0 136.5026,-1.32306 303.78312,-30.42615c167.28064,-29.10306 238.87799,-14.55161 238.20886,-14.55161c-0.66913,0 1.33826,79.37253 1.33826,79.37253c0,0 -543.33026,1.32291 -543.99939,1.32291c-0.66912,0 0.66915,-35.71768 0.66915,-35.71768z" id="svg_10"/>
</g>
</svg>
<img width="100" height="100" src="data:image/png;base64,..."/>
CSS:
IMG {
position: relative;
top: -100px;
}
Demo here