Solved

How to make an svg mask a jpeg image background ?

Posted on 2015-01-31
3
136 Views
Last Modified: 2015-02-01
Hello i do have this svg image

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="585.000000pt"  height="348.000000pt" viewBox="0 0 585.000000 348.000000"
 preserveAspectRatio="none">
 
 
<g transform="translate(0.000000,348.000000) scale(0.100000,-0.100000)"
fill="#B128BD" background-image="img/text1.jpg" stroke="none">
<path d="M372 2257 c-12 -15 -66 -225 -80 -317 -20 -124 -35 -333 -29 -419 7
-111 39 -249 78 -331 27 -58 37 -68 85 -93 94 -48 251 -64 874 -92 904 -39
997 -45 1305 -85 646 -83 728 -90 1096 -90 334 0 347 1 608 35 317 42 651 110
814 164 65 22 170 68 233 101 63 34 118 59 123 56 11 -7 21 42 21 99 0 39 -5
48 -42 80 -102 88 -127 97 -568 209 -162 42 -323 86 -357 100 -102 40 -254 52
-415 33 -73 -9 -250 -19 -393 -22 -466 -11 -720 19 -1386 164 -505 111 -1717
393 -1767 412 -36 14 -188 11 -200 -4z m458 -86 c135 -33 533 -126 885 -206
352 -80 728 -166 835 -191 107 -25 302 -60 434 -79 292 -43 452 -45 986 -15
365 21 424 20 434 -7 14 -35 -64 -120 -184 -201 -146 -99 -459 -192 -649 -192
-122 0 -529 71 -711 123 -536 155 -2123 676 -2359 774 -129 53 -131 67 -10 60
67 -4 166 -23 339 -66z"/>
</g>




</svg>

Open in new window


I need to mask to it this image background attached text1.jpg  how can i do it ?
0
Comment
Question by:jaylab2
  • 2
3 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40581400
Do you want the result to be an svg or jpg?

SVG output from Adobe Illustrator after combining, slipper_bg.jpg is the background image:
<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="585px" height="348px" viewBox="0 0 585 348" enable-background="new 0 0 585 348" xml:space="preserve">
<image overflow="visible" width="290" height="174" xlink:href="slipper_bg.jpg"  transform="matrix(2.031 0 0 2 0 -0.002)">
</image>
<g transform="translate(0.000000,348.000000) scale(0.100000,-0.100000)">
	<path fill="#B128BD" d="M372.002,2257.002c-12.002-15-66.001-225-80-317.002c-20-123.999-35-332.998-29.004-419.004
		C270,1410,302.002,1272.002,341.001,1190c26.997-57.998,36.997-67.998,85-92.998C520,1049.004,677.002,1032.998,1300,1005
		c903.999-39.004,997.002-45,1305-85c645.996-82.998,727.998-90,1095.996-90c334.004,0,347.002,0.996,608.008,35
		c316.992,42.002,650.996,110,813.994,164.004c65,21.992,170,67.998,232.998,100.996c63.008,34.004,118.008,59.004,123.008,55.996
		C5490,1179.004,5500,1227.998,5500,1285c0,39.004-5,47.998-42.002,80c-102.002,87.998-127.002,97.002-567.998,209.004
		c-162.002,41.992-322.998,85.996-357.002,100c-102.002,40-253.994,51.992-415,32.998c-72.998-9.004-250-19.004-392.998-22.002
		c-465.996-10.996-720,19.004-1386.001,163.999c-505,111.001-1716.997,393.003-1766.997,412.002
		C536.001,2275,383.999,2272.002,372.002,2257.002z M830,2171.001C965,2137.998,1362.998,2045,1715,1965
		s727.998-166.001,835-191.001s302.002-59.995,434.004-78.999c291.992-42.998,451.992-45,985.996-15
		c365,20.996,424.004,20,434.004-7.002c13.994-35-64.004-120-184.004-200.996C4074.003,1372.998,3760.996,1280,3570.996,1280
		c-121.992,0-528.994,70.996-710.996,122.998c-536.001,155-2122.998,676.001-2358.999,774.004c-128.999,52.998-131.001,66.997-10,60
		C557.998,2232.998,657.002,2213.999,830,2171.001z"/>
</g>
</svg>

Open in new window

0
 

Author Comment

by:jaylab2
ID: 40581423
Thanks tom but it shows as background image ! and not masked i do need to emulate this from svg and the png on web like this attached and embed

effect.png
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40582342
Ah ha! The png is very helpful in describing what you are trying to accomplish.

If the background will always be a solid color, why not just reverse the svg image (I used Illustrator) and apply the leather background to the parent container. Change the fill colors in the svg markup for the desired effect.
<!doctype html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>SVG over background</title>
<style>
#svg-background {
	width: 585px;
	height: 348px;
	background: #fff url(img/slipper_bg.jpg) no-repeat 0 0;
	background-size: cover
}
</style>
</head>
<body>
<div id="svg-background">
<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="585px" height="348px" viewBox="0 0 585 348" enable-background="new 0 0 585 348" xml:space="preserve">
<g>
	<path fill="#fed" d="M397,180c-53.4,3-69.4,2.8-98.6-1.5c-13.2-1.9-32.7-5.4-43.4-7.9s-48.3-11.1-83.5-19.1s-75-17.3-88.5-20.6
		c-17.3-4.3-27.2-6.2-33.9-6.6c-12.1-0.7-11.9,0.7,1,6c23.6,9.8,182.3,61.9,235.9,77.4c18.2,5.2,58.9,12.3,71.1,12.3
		c19,0,50.301-9.3,64.9-19.2c12-8.1,19.8-16.6,18.4-20.1C439.4,178,433.5,177.9,397,180z"/>
	<path fill="#def" d="M0,0v348h585V0H0z M547.9,229.4c-0.5-0.301-6,2.199-12.301,5.6c-6.3,3.3-16.8,7.9-23.3,10.1
		c-16.3,5.4-49.7,12.2-81.399,16.4c-26.101,3.4-27.4,3.5-60.801,3.5c-36.8,0-45-0.7-109.6-9c-30.8-4-40.1-4.6-130.5-8.5
		c-62.3-2.8-78-4.4-87.4-9.2c-4.8-2.5-5.8-3.5-8.5-9.3c-3.9-8.2-7.1-22-7.8-33.1c-0.6-8.601,0.9-29.5,2.9-41.9
		c1.4-9.2,6.8-30.2,8-31.7c1.2-1.5,16.4-1.8,20-0.4c5,1.9,126.2,30.1,176.7,41.2c66.6,14.5,92,17.5,138.6,16.4
		c14.3-0.3,32-1.3,39.3-2.2c16.101-1.899,31.3-0.7,41.5,3.3c3.4,1.4,19.5,5.801,35.7,10c44.1,11.2,46.6,12.101,56.8,20.9
		c3.7,3.2,4.2,4.1,4.2,8C550,225.2,549,230.1,547.9,229.4z"/>
</g>
</svg>
</div>
</body>
</html>

Open in new window

As the above markup would appear in a web browser
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now