Solved

How to make an svg mask a jpeg image background ?

Posted on 2015-01-31
3
132 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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

747 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

10 Experts available now in Live!

Get 1:1 Help Now