Solved

How to make an svg mask a jpeg image background ?

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

839 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