?
Solved

How to make an svg mask a jpeg image background ?

Posted on 2015-01-31
3
Medium Priority
?
157 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 2000 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

850 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