Fun with SVGs

What if I tell you people create and edit image files in notepad?  Doesn’t it sound unbelievable, and so interesting? So it is!  Try this example.  Copy-paste the following code in the notepad.

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="343pt"
height="340pt"
id="svg2985">
<defs
id="defs2987" />
<g
id="layer1">
<path
d="m 101.89107,250.00697 c 1.49497,-0.55464 2.8801,-1.37187 4.27688,-2.13559 0.48799,-0.26683 1.92327,-1.11812 1.4407,-0.84162 -14.563743,8.34433 -19.016099,11.18099 -12.775998,7.24715 3.060791,-1.93753 6.088728,-3.93604 9.052568,-6.02007 2.8073,-2.00599 5.59493,-4.02267 8.50744,-5.87486 3.60091,-2.25233 6.89077,-4.92495 10.15939,-7.62224 3.50658,-3.16353 7.11148,-6.17714 10.87095,-9.03538 4.34104,-3.17968 8.35663,-6.76474 12.48004,-10.2139 3.97356,-3.40145 7.9306,-6.82718 11.7217,-10.43192 4.23749,-4.24146 8.32887,-8.6297 12.4513,-12.98349 4.45098,-4.75191 8.96435,-9.442 13.05769,-14.50971 4.56808,-5.88151 8.14605,-12.41045 11.56042,-19.00092 3.14926,-6.30397 5.91445,-12.79807 8.71187,-19.26477 1.93246,-5.01293 3.53093,-10.14484 4.72228,-15.38247 0.98808,-4.79044 1.12169,-9.69275 1.22514,-14.56558 0.0579,-4.62214 0.0353,-9.24519 0.001,-13.867489 -0.0661,-3.437457 0.16628,-6.886884 -0.38042,-10.292013 -0.33798,-2.077547 -0.64492,-3.622746 -2.90783,-2.167769 -5.91951,3.753748 0.99545,-0.656165 13.0461,-7.357413 0.69531,-0.386659 -1.34931,0.844804 -2.00004,1.302545 -0.74907,0.526924 -1.47933,1.080901 -2.19705,1.64981 -1.21429,0.962539 -4.17795,3.498329 -5.28771,4.44086 -6.89377,5.931073 -13.36295,12.33441 -19.8465,18.705169 -5.82157,5.78736 -11.34704,11.85841 -16.67517,18.09978 -5.59745,7.25439 -10.37094,15.06447 -14.94522,22.9874 -5.97044,9.81432 -10.82769,20.20216 -15.1413,30.8303 -4.72396,12.41348 -8.0215,25.29 -10.68178,38.28288 -2.32057,12.78174 -4.08716,25.6742 -5.48937,38.58886 -0.89762,9.67709 -1.41414,19.38533 -2.23404,29.06838 -0.72963,7.0117 -1.16933,14.04317 -1.38126,21.08799 0.13967,4.22684 -0.585,8.58086 0.37431,12.7406 0.85165,2.18221 2.9295,2.27042 4.97795,2.40278 3.26345,0.18088 6.31613,-1.38681 9.16504,-2.80535 5.39684,-3.27695 15.47861,-8.2229 -9.66161,5.48342 -0.80225,0.43738 1.50534,-1.03628 2.24895,-1.56728 2.16784,-1.54802 2.68345,-1.97476 4.86066,-3.64461 5.50947,-4.54329 10.91352,-9.2197 16.22082,-13.99812 4.94057,-4.39113 9.61756,-9.0491 13.9776,-14.0149 4.12076,-4.74051 7.89984,-9.76111 11.65365,-14.79264 3.06562,-4.26563 6.33943,-8.37259 9.39609,-12.64434 2.1892,-3.55468 4.36714,-7.12949 6.34211,-10.80949 1.13011,-2.59085 2.40616,-5.09803 3.81717,-7.54366 17.03091,-9.95656 17.85654,-14.6422 16.94309,-2.0278 -0.27057,4.22516 -0.33578,8.45761 -0.34768,12.69007 -0.16851,3.61822 -0.0763,7.11969 1.62073,10.37977 1.08228,2.16937 2.6815,3.73887 4.67835,5.02661 2.01287,1.11191 4.30539,1.28669 6.55376,1.41882 3.41197,0.11418 6.82681,0.10053 10.24024,0.12057 5.47456,-0.41656 10.96095,-0.59198 16.35713,-1.65055 5.30351,-1.11534 10.66086,-1.91891 15.98587,-2.91153 3.10723,-0.39818 6.1353,-1.06461 9.16143,-1.85208 0,0 -14.61105,11.15623 -14.61105,11.15623 l 0,0 c -3.00779,0.67586 -6.04669,1.14656 -9.0862,1.65662 -5.34052,0.92322 -10.66701,1.90932 -15.99387,2.90946 -5.49686,0.85858 -11.06421,1.1186 -16.61353,1.44779 -3.50081,0.0291 -7.01175,0.11973 -10.50642,-0.12675 -2.49581,-0.28049 -4.96152,-0.75887 -7.0928,-2.17645 -2.19594,-1.50812 -3.86153,-3.50579 -5.07566,-5.88784 -1.78604,-3.5457 -2.2714,-7.24186 -1.98176,-11.19257 0.0689,-4.25223 0.0936,-8.50671 0.28492,-12.75555 0.0595,-1.44521 0.0788,-2.02322 0.15221,-3.41889 0.0571,-1.08542 0.0905,-1.76547 0.1772,-1.73611 0.35,0.11859 0.38647,1.01915 0.71404,0.84809 5.33981,-2.78853 10.32645,-6.20662 15.48968,-9.30992 -1.87335,2.12524 -2.9703,4.86179 -4.14644,7.40395 -1.91516,3.78907 -4.21251,7.35483 -6.2728,11.06466 -3.10124,4.30292 -6.37984,8.45564 -9.52351,12.72672 -3.72863,5.0915 -7.55856,10.11628 -11.6368,14.93375 -4.30508,5.07912 -8.96105,9.81986 -13.94015,14.24427 -5.29379,4.78422 -10.69909,9.44095 -16.11348,14.08733 -8.79726,7.08324 -18.54495,12.78951 -28.63232,17.88051 -3.16958,1.36799 -6.39322,2.6388 -9.91678,2.09011 -2.76868,-0.48118 -5.06214,-1.5379 -6.10247,-4.35195 -1.04927,-4.35618 -0.32027,-8.87429 -0.33417,-13.31032 0.26858,-7.11315 0.70671,-14.22144 1.55513,-21.29187 0.96782,-9.73331 1.46103,-19.50894 2.48891,-29.23699 1.5356,-12.97837 3.33618,-25.94083 5.60131,-38.81103 2.587,-13.04471 5.8534,-25.97269 10.37514,-38.49361 4.25842,-10.66231 8.9749,-21.14371 14.91959,-30.99083 4.4789,-7.98242 9.17943,-15.81387 14.60342,-23.20052 5.32256,-6.31457 10.84691,-12.44965 16.69405,-18.28772 6.48101,-6.31517 12.88515,-12.717414 19.63448,-18.749174 8.38951,-7.214137 16.89811,-14.871985 27.92695,-17.9928 3.02579,0.21468 4.08037,1.779358 4.48091,4.691399 0.57823,3.524156 0.33849,7.067612 0.36524,10.62867 -0.0107,4.642243 0.0138,9.28461 -0.0322,13.926755 -0.0797,4.97674 -0.20543,9.98055 -1.07454,14.89369 -1.13875,5.37164 -2.78794,10.60162 -4.70285,15.74567 -2.73183,6.56247 -5.78188,13.01068 -8.78661,19.45164 -3.43461,6.61759 -6.83189,13.26684 -11.31798,19.26116 -3.95267,5.20138 -8.51869,9.86615 -12.96278,14.64499 -4.0763,4.38089 -8.22201,8.69928 -12.34475,13.03377 -3.73883,3.68279 -7.69358,7.12455 -11.66974,10.54905 -4.10827,3.4659 -8.14221,7.02383 -12.40998,10.29468 -3.78026,2.79357 -7.46343,5.64279 -10.81666,8.94659 -3.33396,2.61279 -6.43489,5.53626 -10.06872,7.75656 -2.79156,1.97485 -5.79657,3.64126 -8.44686,5.83642 -3.03832,2.00941 -5.97963,4.16575 -9.07321,6.09137 -7.93048,5.08986 -16.084872,9.88041 -24.571431,13.98371 0,0 14.487881,-11.58893 14.487881,-11.58893 z"
id="path3004"
style="opacity:0.51999996;fill:#ff00ff" />
</g>
</svg>

Save the notepad file with an extension .svg (make sure it is not .txt, the default notepad format). Close the file, and open it with a modern browser.  This is what you wound get.  And the best thing about SVGs is it can be zoomed at whatever level without any loss of quality.  Click on the image below and zoom it to infinity 🙂

This is what you would get!

This is what you would get!

Isn’t it interesting?  And there is a lot more to learn 🙂

Advertisements

Tags: , , ,

One Response to “Fun with SVGs”

  1. Being Indian. Being Plural. « The Blog of Reflections Says:

    […] The Blog of Reflections My Reflections on Love, Life, and Literature!! « Fun with SVGs […]

What are you thinking?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: