edje/example: Added example for testing vector part with svg images.

Reviewers: cedric, jpeg

Reviewed By: jpeg

Subscribers: cedric, jpeg

Differential Revision: https://phab.enlightenment.org/D4062
This commit is contained in:
Subhransu Mohanty 2016-06-21 14:42:28 +09:00 committed by Jean-Philippe Andre
parent 7bf8da2baa
commit a4e6d46d8a
19 changed files with 487 additions and 3 deletions

View File

@ -50,7 +50,8 @@ box_example.edc \
embryo_tween_anim.edc \
embryo_set_state_anim.edc \
bezier-transition-example.edc \
textblock-hyphen.edc
textblock-hyphen.edc \
svg.edc
DIST_EDCS = $(EDCS)
@ -85,6 +86,22 @@ red.png \
test.png \
Vera.ttf \
duck.wav \
dst.svg \
atom.svg \
bojo.svg \
bzrfeed.svg \
yinyang.svg \
ubuntu.svg \
duke.svg \
cartman.svg \
ibm.svg \
hg0.svg \
fsm.svg \
osa.svg \
wikimedia.svg \
scion.svg \
eee.svg \
google.svg \
en_IN/domain_name.po \
hi_IN/domain_name.po \
ta_IN/domain_name.mo \
@ -111,7 +128,8 @@ signals2.c \
edje-swallow2.c \
edje-multisense.c \
edje-edit-part-box.c \
edje-textblock-hyphenation.c
edje-textblock-hyphenation.c \
svg-test.c
EXTRA_DIST = $(DIST_EDCS) $(DATA_FILES)
@ -181,7 +199,8 @@ edje-basic2 \
signals2 \
edje-swallow2 \
edje-edit-part-box \
edje-textblock-hyphenation
edje-textblock-hyphenation \
svg-test
if ENABLE_MULTISENSE
EXTRA_PROGRAMS += edje-multisense

14
src/examples/edje/atom.svg Executable file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-52 -53 100 100" stroke-width="2">
<g fill="none">
<ellipse stroke="#66899a" rx="6" ry="44"/>
<ellipse stroke="#e1d85d" rx="6" ry="44" transform="rotate(-66)"/>
<ellipse stroke="#80a3cf" rx="6" ry="44" transform="rotate(66)"/>
<circle stroke="#4b541f" r="44"/>
</g>
<g fill="#66899a" stroke="white">
<circle fill="#80a3cf" r="13"/>
<circle cy="-44" r="9"/>
<circle cx="-40" cy="18" r="9"/>
<circle cx="40" cy="18" r="9"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 504 B

15
src/examples/edje/bozo.svg Executable file
View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<a xlink:href="http://www.tbray.org/ongoing/When/200x/2004/01/11/PostelPilgrim">
<path d="M10,15c10,10,10,0,40,0c30,0,30,10,40,0q-10,30-40,30q-30,0-40-30"
stroke="black" fill="red"/>
<ellipse stroke="black" fill="white" cx="50" cy="40" rx="22" ry="35"/>
<circle cx="50" cy="40" r="5" stroke="black" fill="red"/>
<circle cx="48" cy="38" r="1" fill="white"/>
<path d="M35,45C40,75,60,75,65,45Q50,60,35,45Z"
stroke="red" stroke-width="2" stroke-linejoin="round"/>
<circle cx="40" cy="30" r="2"/>
<circle cx="60" cy="30" r="2"/>
<path d="M35,30q5-10,10,0q-5-30-10,0" stroke="black" fill="none"/>
<path d="M55,30q5-10,10,0q-5-30-10,0" stroke="black" fill="none"/>
</a>
</svg>

After

Width:  |  Height:  |  Size: 807 B

23
src/examples/edje/bzrfeed.svg Executable file
View File

@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round" viewBox="0 0 100 100">
<path d="M50,4L4,50L50,96L96,50Z" stroke="#FE4" stroke-width="3"/>
<path d="M50,5L5,50L50,95L95,50Z" stroke="#333" fill="#FE4" stroke-width="3"/>
<g transform="scale(0.8) translate(14,30)">
<path d="M37,42c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#CA0" fill="#CA0"/>
<path d="M35,40c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#333" fill="#555"/>
</g>
<g transform="translate(50,26) scale(0.25)" stroke-width="2">
<g fill="none">
<ellipse stroke="#469" rx="6" ry="44"/>
<ellipse stroke="#ba5" rx="6" ry="44" transform="rotate(-66)"/>
<ellipse stroke="#68c" rx="6" ry="44" transform="rotate(66)"/>
<circle stroke="#331" r="44"/>
</g>
<g fill="#689" stroke="#FE4">
<circle fill="#80a3cf" r="13"/>
<circle cy="-44" r="9"/>
<circle cx="-40" cy="18" r="9"/>
<circle cx="40" cy="18" r="9"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

11
src/examples/edje/cartman.svg Executable file
View File

@ -0,0 +1,11 @@
<svg viewBox='0 0 104 97' xmlns='http://www.w3.org/2000/svg'>
<path d='M14,85l3,9h72c0,0,5-9,4-10c-2-2-79,0-79,1' fill='#7C4E32'/>
<path d='M19,47c0,0-9,7-13,14c-5,6,3,7,3,7l1,14c0,0,10,8,23,8c14,0,26,1,28,0c2-1,9-2,9-4c1-1,27,1,27-9c0-10,7-20-11-29c-17-9-67-1-67-1' fill='#E30000'/>
<path d='M17,32c-3,48,80,43,71-3 l-35-15' fill='#FFE1C4'/>
<path d="M17,32c9-36,61-32,71-3c-20-9-40-9-71,3" fill="#8ED8F8"/>
<path d='M54,35a10 8 60 1 1 0,0.1zM37,38a10 8 -60 1 1 0,0.1z' fill='#FFF'/>
<path d='M41,6c1-1,4-3,8-3c3-0,9-1,14,3l-1,2h-2h-2c0,0-3,1-5,0c-2-1-1-1-1-1l-3,1l-2-1h-1c0,0-1,2-3,2c0,0-2-1-2-3M17,34l0-2c0,0,35-20,71-3v2c0,0-35-17-71,3M5,62c3-2,5-2,8,0c3,2,13,6,8,11c-2,2-6,0-8,0c-1,1-4,2-6,1c-4-3-6-8-2-12M99,59c0,0-9-2-11,4l-3,5c0,1-2,3,3,3c5,0,5,2,7,2c3,0,7-1,7-4c0-4-1-11-3-10' fill='#FFF200'/>
<path d='M56,78v1M55,69v1M55,87v1' stroke='#000' stroke-linecap='round'/>
<path d='M60,36a1 1 0 1 1 0-0.1M49,36a1 1 0 1 1 0-0.1M57,55a2 3 0 1 1 0-0.1M12,94c0,0,20-4,42,0c0,0,27-4,39,0z'/>
<path d='M50,59c0,0,4,3,10,0M56,66l2,12l-2,12M25,50c0,0,10,12,23,12c13,0,24,0,35-15' fill='none' stroke='#000' stroke-width='0.5'/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

15
src/examples/edje/dst.svg Executable file
View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" >
<g transform="translate(25,25)">
<path d="M38,-1h12v2h-12zM-38-1h-12v2h12z"/>
<path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(30)"/>
<path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(60)"/>
<path d="M38,-1h12v2h-12zM-38-1h-12v2h12z" transform="rotate(90)"/>
<path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(120)"/>
<path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(150)"/>
<path d="M-0.5,0v-35h1v35z"/>
<path d="M0,-0.75h30v1.5h-30z"/>
<path d="M0,-0.75h30v1.5h-30z" transform="rotate(-30)" fill="#F88"/>
<path d="M25-12A28,28 0,0,1 28-2m-0.3,0l-1-2h2z" stroke-width="1" stroke-linejoin="round" stroke="#F00" fill="#F00"/>
<circle r="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 794 B

25
src/examples/edje/duke.svg Executable file
View File

@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 136">
<path d="M1190 2982 c-38-31-31-179 17-347 14-49-50 34-89 115-59 126
-75 138-139 104-89-45-31-286 106-438 37-41 37-56 2-56-64-1-147
-63-147-111 0-68 36-95 107-78 72 17 110 12 162-18 59-36 99-53 121
-53 70 0 98-274 36-339-77-80-124-64-211 69-235 363-871 1021-794
823 6-16 15-109 21-208 8-154 7-237-7-510-1-22-5-71-9-110-3
-38-8-99-11-135-16-193-59-311-172-463-89-120-103-199-62-333
46-147 32-217-65-342-86-110-34-240 74-182 15 8 16-2 16-118-1
-208 99-262 252-137 459 378 583 383 820 37 106-155 165-182 267-123 179
103 150 755-55 1272-72 180-71 272 6 419 l38 71-1 147 c0 177 4 192 76
262 82 80 99 158 65 300-25 105-22 166 16 269 47 130 23 186-68 161-65
-17-142-154-142-253 0-42-37 30-49 96-23 120-43 186-61 202-30 27
-91 31-120 7z m-342-1094 c74-22 122-90 122-170 0-77-7-87-54-86-83
2-183-78-173-139 14-82-172-40-237 54-127 183 105 413 342 341z m315
-214 c237-426 341-786 342-1179 0-460-61-531-239-277-251 358-453
367-824 35-124-110-190-136-208-80-7 22-7 235 0 272 2 11 7 45 10 75
4 30 8 66 11 80 2 14 9 52 14 85 109 661 160 849 214 789 199-228 612 2 545
303-6 28-4 32 15 36 38 7 40 4 120-139z m-900-522 c3-4-5-61-18-127
-13-66-25-131-27-145-6-36-39 38-46 101-7 76 66 213 91 171z"
transform="translate(0,136) scale(0.045181,-0.045181)"/>
<ellipse rx="12" ry="10" transform="rotate(-24) translate(5.4,68.3)"
fill="#F00" opacity="0.7"/>
<ellipse rx="3.5" ry="2" transform="rotate(-33) translate(-9,61)" fill="#FFF"
opacity="0.7"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 121 83" xmlns="http://www.w3.org/2000/svg">
<path d="M40,33c-12,2-28,9-36,20c-7,10-3,23,9,26c6,1,12,2,17,0v-1c-4,1-9,1-14,0c-11-2-19-13-11-23c6-9,15-13,24-17c5-2,13-2,16-6c-12-3-13-14-3-21c11-8,25-9,39-8v-1c-11-4-31,2-39,7c-4,2-8,6-9,10c-1,7,4,10,8,15M81,2v1c1,0,11,3,7,5c-2,2-8-1-11-1c-10-1-20,1-30,6c-3,1-8,4-8,8c1,11,21,9,28,9c2,0,9,1,6,4c-3,4-13,4-18,4c-12,2-26,6-37,13c-4,3-9,7-9,13c0,7,7,8,12,8c12,0,22-4,32-12c-1,0-1,7-3,9c-3,4-14,7-20,9v1c7-2,15-4,22-7c5,15,27,6,35-1c4,12,24,11,29,1c-9,4-25,9-23-7c8,0,17,0,24-5c8-6,3-14-6-15c-20-1-20,22-33,29c-9,4-21,3-21-9c8,0,18,0,24-5c8-6,4-14-5-15c-16-1-30,21-46,25c-6,1-16,3-20-4c-2-6,8-12,12-15c11-7,24-10,37-12c4-1,13,1,16-4c3-5-2-5-6-6c-6,0-26,1-27-7c-1-5,6-8,9-9c7-3,15-6,23-5c4,0,11,4,14,3c9-3-4-9-7-9" fill="#666"/>
<path d="M59,63c6,0,13-1,18-6c2-2,4-5,3-8c-6-7-19,10-21,14M95,63c5,0,25-4,20-13c-1-3-5-2-7-1c-6,3-11,8-13,14" fill="#fff"/>
</svg>

After

Width:  |  Height:  |  Size: 919 B

20
src/examples/edje/fsm.svg Normal file
View File

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 66">
<circle r="3" cx="63" cy="9"/>
<circle r="3" cx="87" cy="9"/>
<path d="M50,28s7-4,14-3l0,0s1,3,0,6l-2,0s-2-3-4-1l0,2s4,0,5,1l-1,5l-4-1l-1,5l-6-1z"/>
<path d="M65,38s0,4,2,8l6,0s15-5,3-14l0,0s-7-3,0-4l2,3s9,2,2-8l-6-1s-12,3-6,12l2,1s9,4-1,4z"/>
<path d="M84,45s-2-10,3-19l1-1s3,0,4,6l3-4l4,0s5,6,3,12l-4,1l-2-6s-3,8-7,0l-1,10z"/>
<g stroke="#000" stroke-width="3" fill="none" stroke-linecap="round">
<circle r="6" cx="63" cy="9"/>
<circle r="6" cx="87" cy="9"/>
<path d="M36,34S75,00,114,34m0,0S75,68,36,34"/>
<path d="M64,15l2,4M85,15l-1,4"/>
<path d="M36,34c-18-14-18-3-17-1s2,6-8,2c-6-4-6-2-9-2"/>
<path d="M42,39c-10,2-11,0-12,9c0,2,0,8-10,6c-4-2-8-2-9,2"/>
<path d="M50,45c-5,4-5,4-3,12c0,3,0,6-12,6"/>
<path d="M114,34c6-5,18-8,15,1c0,8,10,0,12,0s3-1,6,0"/>
<path d="M107,40c6,0,10,0,12,10c2,6,4,5,10,4s6-1,9,2"/>
<path d="M97,45s6,4,6,9s-5,10,11,10"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 986 B

View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M90,18c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#CCC" stroke="#DDD" stroke-width="2" stroke-linejoin="round"/>
<path d="M87,15c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#00F"/>
</svg>

After

Width:  |  Height:  |  Size: 330 B

10
src/examples/edje/hg0.svg Normal file
View File

@ -0,0 +1,10 @@
<svg viewBox="0 0 103 98" xmlns="http://www.w3.org/2000/svg">
<path d="M89,71c15-26-3-68-38-64c-31,4-31,37-4,45c24,6,5,21,6,31c0,10,20,14,36-12M16,37c-5,0-8,5-8,9c1,5,5,9,10,8c5,0,8-4,8-9c-1-5-5-9-10-8" fill="#1b1a1b"/>
<circle cx="32" cy="73" fill="#1b1a1b" r="13"/>
<path d="M90,70c15-26-4-68-38-64c-31,4-32,37-4,44c23,7,5,22,5,32c1,10,21,14,37-12M17,36c-5,0-9,5-8,9c0,5,4,9,9,8c5,0,9-5,8-9c0-5-5-9-9-8" fill="#bfbfbf"/>
<circle cx="33" cy="72" fill="#bfbfbf" r="13"/>
<path d="M57,86c-1-1,1-3,2-3c3,0,8,0,12-2c10-6,25-33,17-51c-3-8-5-10-8-14c-1,0-1,0,0,0c2,1,5,5,9,11c6,11,5,24,3,32c-1,6-7,19-14,24c-8,6-17,9-21,3M50,50c-5-1-12-3-16-8c-3-4-4-8-5-11v-1c0-1,3,4,6,8c3,4,7,6,11,7c3,1,9,2,12,4c2,2,2,6,1,7c0,0-2-4-9-6M25,83c10,9,26-4,19-16l-1-1c2,7,0,12-4,15c-4,3-9,3-13,1c-1-1-2,0-1,1M13,51c0,1,1,2,2,2c1,0,4,1,8-1c4-3,4-9,2-11c0-1-1-2,0,0c1,4-2,7-4,9c-2,2-5,1-7,1c-1-1-1,0-1,0" fill="#000000"/>
<path d="M61,87c0,1,1,1,3,1c3,0,5-1,7-2c4-2,8-5,11-8c8-11,11-24,10-26c0,2-2,10-6,17c-6,9-10,14-20,17c-3,0-5-1-5,1M39,45l8,4c6,1,8,3,9,4c2,0,2,2,2,1c0-2,0-3-3-4c-1,0-4-2-6-2l-6-2l-4-1M33,85c1-1,9-3,11-9c1-2,1-2,0,0c0,5-6,9-10,9h-1M18,52c0,0,2,0,3-1c2-1,4-3,4-5v-1c0,5-4,7-6,8c-1,0-2,0-1-1" fill="#ffffff"/>
<path d="M87,53c7-19-7-48-35-44c-25,3-25,29-3,36c25,3,10,22,8,32c-2,9,20,10,30-24M24,80c2,0,3,0,4,1c4,2,9,1,12-3c3-3,3-8,2-11c-3-7-13-7-18-1c-5,7-1,14,0,14M10,47c1,1,1,2,3,2c2,1,3,2,5,1c3,0,5-3,6-5c1-3-1-5-3-7c-2-1-6-1-9,1c-2,2-3,5-2,8" fill="#999999"/>
<path d="M70,68c-7-1-16,14-7,12c9-1-9,2,0,0c4,0,8-2,11-6c5-4,11-15,13-22c1-6,1-15-1-6c-2,8-9,23-16,22M19,49c2-1,5-3,4-6c-2-2-7,0-7,3c0,3,1,3,3,3M35,81c1-1,7-3,6-11c-1-4-3,5-7,6c-6,2-5,6,1,5" fill="#f3f3f3"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

44
src/examples/edje/ibm.svg Normal file
View File

@ -0,0 +1,44 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 68">
<g transform="scale(0.1578)">
<polyline fill="#5C7DB8" points="851.165,24.442 713.147,24.442 721.839,0.012 851.165,0.012 851.165,24.442 "/>
<path fill="#5C7DB8" d="M473.454,0.012L601.34,0l8.59,24.487c0.056-0.034-136.431,0.034-136.431,0S473.421,0.012,473.454,0.012"/>
<path fill="#5C7DB8" d="M368.987,0.012c21.684,2.088,40.531,9.811,56.585,24.476c0,0-238.443,0.022-238.443,0 c0-0.034,0-24.487,0-24.487L368.987,0.012"/>
<rect x="0.024" y="0.006" fill="#5C7DB8" width="165.646" height="24.425"/>
<path fill="#5C7DB8" d="M851.165,70.281H697.104c0,0,8.478-24.301,8.433-24.319h145.628V70.281"/>
<polyline fill="#5C7DB8" points="626.222,70.304 473.454,70.304 473.454,45.962 617.563,45.962 626.222,70.304 "/>
<path fill="#5C7DB8" d="M444.138,45.952c3.142,8.027,6.867,14.895,6.867,24.318H187.174V45.952H444.138"/>
<rect x="0.024" y="45.962" fill="#5C7DB8" width="165.646" height="24.307"/>
<path fill="#5C7DB8" d="M689.382,91.801l-8.546,24.42h123.438c0.057-0.056-0.033-24.38,0-24.38L689.382,91.801"/>
<polyline fill="#5C7DB8" points="633.843,91.791 642.467,116.221 520.11,116.221 520.11,91.791 633.843,91.791 "/>
<path fill="#5C7DB8" d="M453.099,91.791c0,8.381-1.047,17.096-3.489,24.431h-72.246V91.791H453.099"/>
<rect x="46.196" y="91.908" fill="#5C7DB8" width="71.188" height="24.313"/>
<rect x="235.101" y="91.791" fill="#5C7DB8" width="71.075" height="24.431"/>
<path fill="#5C7DB8" d="M673.45,136.813h130.823v24.312h-69.668c0,0.197-0.034-18.526-0.034-18.526s-6.45,18.481-6.462,18.526 h-62.776L673.45,136.813"/>
<path fill="#5C7DB8" d="M590.002,142.577c0,0,0.012,18.503,0,18.548H520.11v-24.312h129.573l8.703,24.312c0,0-61.889,0.046-61.889,0 L590.002,142.577"/>
<path fill="#5C7DB8" d="M235.101,136.802h204.038c-4.459,8.14-12.564,18.042-20.242,24.324c0,0-183.795,0.023-183.795,0 C235.101,161.081,235.101,136.857,235.101,136.802"/>
<rect x="46.196" y="136.802" fill="#5C7DB8" width="71.188" height="24.313"/>
<rect x="734.605" y="182.641" fill="#5C7DB8" width="69.668" height="24.318"/>
<path fill="#5C7DB8" d="M590.002,182.641H520.11v24.318c-0.056-0.022,69.903,0,69.903,0 C590.014,206.937,590.092,182.641,590.002,182.641"/>
<path fill="#5C7DB8" d="M720.544,182.641c-0.326-0.023-8.162,24.296-8.5,24.318l-99.232,0.044 c-0.09-0.044-8.736-24.386-8.736-24.362H720.544"/>
<path fill="#5C7DB8" d="M235.09,182.641h183.458c8.376,6.98,15.93,15.582,21.874,24.318c0.327-0.022-205.321,0-205.321,0 C235.101,206.937,235.09,182.674,235.09,182.641"/>
<path fill="#5C7DB8" d="M117.383,206.959v-24.318H46.309c0,0,0.011,24.296,0,24.296C46.297,206.937,117.337,206.959,117.383,206.959 "/>
<rect x="734.605" y="228.475" fill="#5C7DB8" width="69.668" height="24.318"/>
<rect x="520.087" y="228.484" fill="#5C7DB8" width="69.915" height="24.309"/>
<path fill="#5C7DB8" d="M695.754,252.905c0.012-0.102,8.59-24.454,8.724-24.431h-84.359c-0.158-0.012,8.646,24.329,8.646,24.329 S695.742,252.995,695.754,252.905"/>
<path fill="#5C7DB8" d="M235.101,252.781c0,0.101-0.011-24.307-0.011-24.307h72.134c0,0,0.056,24.329,0,24.329 C307.156,252.804,235.101,252.77,235.101,252.781"/>
<path fill="#5C7DB8" d="M450.544,228.475c3.479,7.329,3.838,16.042,4.526,24.431h-76.423v-24.431H450.544"/>
<rect x="46.309" y="228.463" fill="#5C7DB8" width="71.075" height="24.318"/>
<rect x="734.605" y="273.361" fill="#5C7DB8" width="116.548" height="24.318"/>
<rect x="473.454" y="273.361" fill="#5C7DB8" width="116.548" height="24.318"/>
<polyline fill="#5C7DB8" points="680.082,297.68 644.492,297.68 635.958,273.361 688.311,273.361 680.082,297.68 "/>
<path fill="#5C7DB8" d="M0.013,273.361v24.318h165.522c0.079,0.045-0.068-24.296,0-24.296 C165.614,273.384-0.189,273.361,0.013,273.361"/>
<path fill="#5C7DB8" d="M452.052,273.361c-1.745,8.038-3.344,17.812-9.197,24.318h-2.195H187.163v-24.318H452.052"/>
<polyline fill="#5C7DB8" points="663.948,343.581 660.672,343.581 652.363,319.205 672.481,319.205 663.948,343.581 "/>
<rect x="734.605" y="319.205" fill="#5C7DB8" width="116.548" height="24.432"/>
<path fill="#5C7DB8" d="M187.129,343.581v-24.342c0,0,239.153,0.035,239.84,0.035c-16.055,15.355-38.088,24.014-61.809,24.362 l-177.997-0.046"/>
<rect x="473.454" y="319.205" fill="#5C7DB8" width="116.548" height="24.432"/>
<path fill="#5C7DB8" d="M165.536,319.318c0,0-0.068,24.263,0,24.263c0.079,0-165.478,0.1-165.522,0.044 c-0.045-0.044,0.045-24.386,0-24.386C-0.032,319.239,165.468,319.386,165.536,319.318"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

19
src/examples/edje/osa.svg Normal file
View File

@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<g stroke-width="5" fill="none">
<g stroke="#fa3">
<circle r="6" cx="24" cy="16"/>
<circle r="6" cx="51" cy="88"/>
<path d="M35,39a16,16 0,1,0 4-5l-11-13M50,62l1,20"/>
</g>
<g stroke="#a38">
<circle r="6" cx="72" cy="13"/>
<path d="M37,23a27,27 0,0,1 39,24M68,18l-5,7"/>
</g>
<g stroke="#e33">
<circle r="6" cx="49" cy="46"/>
<circle r="6" cx="11" cy="62"/>
<circle r="6" cx="89" cy="58"/>
<path d="M16,60l8-4M56,73a27,27 0,0,0 19-19l8,2M45,73a27,27 0,0,1-17-43"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 626 B

View File

@ -0,0 +1,9 @@
<svg viewBox="0 0 120 83" xmlns="http://www.w3.org/2000/svg">
<path d="M60,0c-33,0-60,19-60,42c0,22,27,41,60,41c33,0,60-19,60-41c0-23-27-42-60-42M60,77c-27,0-48-16-48-35c0-20,21-36,48-36c27,0,49,16,49,36c0,19-22,35-49,35" fill="#AAA"/>
<path d="M60,4c-28,0-52,17-52,38c0,20,24,37,52,37c29,0,52-17,52-37c0-21-23-38-52-38M60,77c-27,0-48-16-48-35c0-20,21-36,48-36c27,0,49,16,49,36c0,19-22,35-49,35" fill="#717279"/>
<path d="M60,3c-29,0-52,17-52,39c0,21,23,38,52,38c29,0,53-17,53-38c0-22-24-39-53-39M60,79c-28,0-52-17-52-37c0-21,24-38,52-38c29,0,52,17,52,38c0,20-23,37-52,37M111,35h-102l-1,7l1,6h102c1-2,1-4,1-6c0-3,0-5-1-7" fill="#EEE"/>
<path d="M108,34h-95l-4,1h3h96h3l-3-1" fill="#58585E"/>
<path d="M12,48h-3l4,1h95l3-1h-3z" fill="#3A3B3E"/>
<path d="M62,5c0,0-14,13-16,30h12c-4-13,4-30,4-30M59,78c0,0,13-13,15-30h-11c4,13-4,30-4,30" fill="#BBB"/>
<path d="M58,35h9c-11-6-5-30-5-30s-8,17-4,30M63,48h-10c11,6,6,30,6,30s8-17,4-30M109,45c0,1-1,1-2,1h-1v-7l-1-1h-15v8h-3v-9h19c1,0,3,1,3,2zM12,45h17c1,0,1-1,1-1v-2h-18v-3c0-1,1-2,3-2h18v1h-17c-1,0-1,1-1,1v2h18v3c0,1-1,2-3,2h-16c-1,0-2,0-2-1M38,44l1,1h17v1h-18c-2,0-3-1-3-2v-5c0-1,1-2,3-2h18v1h-17l-1,1zM62,37v9h-3v-9zM85,39v5c0,1-1,2-2,2h-16c-2,0-3-1-3-2v-5c0-1,1-2,3-2h16c1,0,2,1,2,2M81,38h-13c-1,0-1,1-1,1v5c0,0,0,1,1,1h13c1,0,1-1,1-1v-5c0,0,0-1-1-1" fill="#060506"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,111 @@
/**
* Simple Edje example illustrating svg part usuage in edc.
*
* You'll need at least one Evas engine built for it (excluding the
* buffer one). See stdout/stderr for output.
*
* @verbatim
* edje_cc svg.edc && gcc -o svg-test svg-test.c `pkg-config --libs --cflags evas ecore ecore-evas edje`
* @endverbatim
*/
#ifdef HAVE_CONFIG_H
# include "config.h"
#else
# define EINA_UNUSED
#endif
#ifndef PACKAGE_DATA_DIR
#define PACKAGE_DATA_DIR "."
#endif
#include <Ecore.h>
#include <Ecore_Evas.h>
#include <Edje.h>
#define WIDTH 800
#define HEIGHT 800
static void
_on_destroy(Ecore_Evas *ee EINA_UNUSED)
{
ecore_main_loop_quit();
}
/* here just to keep our example's window size and background image's
* size in synchrony */
static void
_on_canvas_resize(Ecore_Evas *ee)
{
Evas_Object *bg;
Evas_Object *edje_obj;
int w;
int h;
bg = ecore_evas_data_get(ee, "background");
edje_obj = ecore_evas_data_get(ee, "edje_obj");
ecore_evas_geometry_get(ee, NULL, NULL, &w, &h);
evas_object_resize(bg, w, h);
evas_object_resize(edje_obj, w, h);
}
int
main(int argc EINA_UNUSED, char *argv[] EINA_UNUSED)
{
const char *edje_file = "./svg.edj";
Ecore_Evas *ee;
Evas *evas;
Evas_Object *bg;
Evas_Object *edje_obj;
if (!ecore_evas_init())
return EXIT_FAILURE;
if (!edje_init())
goto shutdown_ecore_evas;
/* this will give you a window with an Evas canvas under the first
* engine available */
ee = ecore_evas_new(NULL, 0, 0, WIDTH, HEIGHT, NULL);
if (!ee) goto shutdown_edje;
ecore_evas_callback_destroy_set(ee, _on_destroy);
ecore_evas_callback_resize_set(ee, _on_canvas_resize);
ecore_evas_title_set(ee, "SVG Example");
evas = ecore_evas_get(ee);
bg = evas_object_rectangle_add(evas);
evas_object_color_set(bg, 0, 0, 0, 255);
evas_object_resize(bg, WIDTH, HEIGHT);
evas_object_focus_set(bg, EINA_TRUE);
evas_object_show(bg);
ecore_evas_data_set(ee, "background", bg);
edje_obj = edje_object_add(evas);
edje_object_file_set(edje_obj, edje_file, "svg-test");
evas_object_move(edje_obj, 0, 0);
evas_object_resize(edje_obj, WIDTH, HEIGHT);
evas_object_show(edje_obj);
ecore_evas_data_set(ee, "edje_obj", edje_obj);
ecore_evas_show(ee);
ecore_main_loop_begin();
ecore_evas_free(ee);
ecore_evas_shutdown();
edje_shutdown();
return EXIT_SUCCESS;
shutdown_edje:
edje_shutdown();
shutdown_ecore_evas:
ecore_evas_shutdown();
return EXIT_FAILURE;
}

104
src/examples/edje/svg.edc Normal file
View File

@ -0,0 +1,104 @@
#define SVG_PART(bg, vg, rel1x, rel1y, rel2x, rel2y,svg_id)\
rect { bg; \
description { state: "default" 0.0; \
color: 255 255 255 255; \
rel1.relative: rel1x rel1y; \
rel2.relative: rel2x rel2y; \
rel1.offset: 1 1; \
rel2.offset: -1 -1; \
} \
description { state: "clicked" 0.0; \
inherit: "default" 0.0; \
rel1.relative: 0.0 0.0; \
rel2.relative: 1.0 1.0; \
} \
}\
vector { vg;\
description { state: "default" 0.0; \
color: 255 255 255 255; \
rel1.to: bg; \
rel2.to: bg; \
image.normal: svg_id; \
} \
description { state: "clicked" 0.0; \
inherit: "default" 0.0; \
} \
}
#define SVG_PROGRAM(bg, vg) \
program { bg; \
signal: "mouse,down,1"; \
source: vg; \
action: STATE_SET "clicked"; \
transition: LINEAR 0.5; \
target: bg; \
}\
program { vg; \
signal: "mouse,up,1"; \
source: vg; \
action: STATE_SET "default"; \
transition: LINEAR 0.5; \
target: bg; \
}
collections {
base_scale: 1.0;
/* TODO: Please replace embedded image files to your application image files. */
images {
vector: "dst.svg";
vector: "atom.svg";
vector: "bojo.svg";
vector: "bzrfeed.svg";
vector: "yinyang.svg";
vector: "ubuntu.svg";
vector: "duke.svg";
vector: "cartman.svg";
vector: "ibm.svg";
vector: "hg0.svg";
vector: "fsm.svg";
vector: "osa.svg";
vector: "wikimedia.svg";
vector: "scion.svg";
vector: "eee.svg";
vector: "google.svg";
}
group {
name: "svg-test";
parts {
SVG_PART("bg1", "vg1", 0.0, 0.0, .25, .25,"dst.svg")
SVG_PART("bg2", "vg2", 0.25, 0.0, .5, .25,"atom.svg")
SVG_PART("bg3", "vg3", 0.5, 0.0, .75, .25,"bojo.svg")
SVG_PART("bg4", "vg4", 0.75, 0.0, 1.0, .25,"bzrfreed.svg")
SVG_PART("bg5", "vg5", 0.0, 0.25, .25, .5,"yinyang.svg")
SVG_PART("bg6", "vg6", 0.25, 0.25, .5, .5,"ubuntu.svg")
SVG_PART("bg7", "vg7", 0.5, 0.25, .75, .5,"duke.svg")
SVG_PART("bg8", "vg8", 0.75, 0.25, 1.0, .5,"cartman.svg")
SVG_PART("bg9", "vg9", 0.0, 0.5, .25, .75,"ibm.svg")
SVG_PART("bg10", "vg10", 0.25, 0.5, .5, .75,"hg0.svg")
SVG_PART("bg11", "vg11", 0.5, 0.5, .75, .75,"fsm.svg")
SVG_PART("bg12", "vg12", 0.75, 0.5, 1.0, .75,"osa.svg")
SVG_PART("bg13", "vg13", 0.0, 0.75, .25, 1.0,"wikimedia.svg")
SVG_PART("bg14", "vg14", 0.25, 0.75, .5, 1.0,"scion.svg")
SVG_PART("bg15", "vg15", 0.5, 0.75, .75, 1.0,"eee.svg")
SVG_PART("bg16", "vg16", 0.75, 0.75, 1.0, 1.0,"google.svg")
}
programs {
SVG_PROGRAM("bg1", "vg1")
SVG_PROGRAM("bg2", "vg2")
SVG_PROGRAM("bg3", "vg3")
SVG_PROGRAM("bg4", "vg4")
SVG_PROGRAM("bg5", "vg5")
SVG_PROGRAM("bg6", "vg6")
SVG_PROGRAM("bg7", "vg7")
SVG_PROGRAM("bg8", "vg8")
SVG_PROGRAM("bg9", "vg9")
SVG_PROGRAM("bg10", "vg10")
SVG_PROGRAM("bg11", "vg11")
SVG_PROGRAM("bg12", "vg12")
SVG_PROGRAM("bg13", "vg13")
SVG_PROGRAM("bg14", "vg14")
SVG_PROGRAM("bg15", "vg15")
SVG_PROGRAM("bg16", "vg16")
}
}

26
src/examples/edje/ubuntu.svg Executable file
View File

@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-70 -70 140 140">
<defs>
<path id="b" d="M 23,-20 A32,32 0,0,0 -23,-20 L -40,-30 A42,42 0,0,1 -14,-47 A17,17 0,0,0 14,-47 A42,42 0,0,1 40,-30 Z"/>
<circle id="h" cx="0" cy="-57" r="12"/>
</defs>
<g transform="translate(5,5)" opacity="0.125">
<use xlink:href="#h" transform="rotate(30)"/>
<use xlink:href="#b" transform="rotate(30)"/>
<use xlink:href="#h" transform="rotate(150)"/>
<use xlink:href="#b" transform="rotate(150)"/>
<use xlink:href="#h" transform="rotate(-90)"/>
<use xlink:href="#b" transform="rotate(-90)"/>
</g>
<a xlink:href="http://www.ubuntu.com/">
<use xlink:href="#h" fill="#d00" transform="rotate(30)"/>
<use xlink:href="#b" fill="#f40" transform="rotate(30)"/>
<use xlink:href="#h" fill="#f80" transform="rotate(150)"/>
<use xlink:href="#b" fill="#d00" transform="rotate(150)"/>
<use xlink:href="#h" fill="#f40" transform="rotate(-90)"/>
<use xlink:href="#b" fill="#f80" transform="rotate(-90)"/>
</a>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M19,16a46,46 0,1,0 62,0l-8,8a34,34 0,1,1-46,0z" fill="#069"/>
<path d="M46,43v35a28,28 0,0,1-14-49zM54,43v35a28,28 0,0,0 14-49z" fill="#396"/>
<circle r="15" cx="50" cy="18" fill="#900"/>
</svg>

After

Width:  |  Height:  |  Size: 272 B

6
src/examples/edje/yinyang.svg Executable file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="48" fill="none" stroke="#000"/>
<path d="M50,2a48,48 0 1 1 0,96a24 24 0 1 1 0-48a24 24 0 1 0 0-48"/>
<circle cx="50" cy="26" r="6"/>
<circle cx="50" cy="74" r="6" fill="#FFF"/>
</svg>

After

Width:  |  Height:  |  Size: 282 B