?
Solved

How to make an svg mask a jpeg image background ?

Posted on 2015-01-31
3
Medium Priority
?
149 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Create a Windows 10 custom Image with custom task bar and custom start menu using XML for deployment.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

800 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