Printable Page

ክፍል 1፥ የጥናት መግቢያ

1.1 ተፈላጊ ሶፍትዌሮች

በመጀመሪያ ለጥናታችን የምንጠቀማቸውን ፕሮግራሞች እናያለን። ጥናቱን ለመከታተልና ምሳሌዎችን ለመሞከር፥ ከዚህ በታች የተመለከቱት ወይም ተመሳሳይ ፕሮግራሞች በቅድሚያ መዘጋጀት አለባቸው።

• ሳድስ ወይም ተመሳሳይ ፕሮግራም (ንባብ መጻፊያ)
  ይህ ጥናት ሙሉ በሙሉ የተጻፈው በሳድስ የኢትዮጵያ ዩንኮድ ንባብ መጻፊያ ፕሮግራም ነው። ሳድስ የነፃ ፕሮግራም ነው። ከሚከተለው አድራሻ መግልበጥ ይቻላል። ምናልባት አንባቢው የመጠቀም ችግር ከገጠመው ጥያቄውን ወደ contact@senamirmir.org ይላክ።
  Sadiss 1.0 ከዚህ ይገልብጡ!
• ዌብ ገጽ መቃኛ
  ሥዕሎችን ለመሞከርና ለመፈተን ዌብ መቃኛ ፕሮግራም ይጠይቃል። ሆኖም ባሁኑ ጊዜ፥ የትኛውም ዌብ መቃኛ ፕሮግራም በራሱ የSVGን ሥዕሎች በሥራ የመተርጐም ችሎታ የለውም። ይሁን እንጂ የአዶቢን SVG Viewer 3.02 ከመቃኛ ፕሮግራሞች ጋር በማዳበል ግን ሥዕሎችን መሞከርና መፈተን እንችላለን። ስለዚህ IE እና የአዶቢ SVG መመልከቻ 3.02 ለጥናታችን ያሥፈልጋሉ። መመልከቻውን ከዚህ አድራሻ መገልበጥ ይቻላል።
  Adobe SVG Viewer ከዚህ ይገልብጡ!
• የኢትዮጵያ ፊደል ፎንት
  ከኢትዮጵያ ፊደል ጋራ የተያያዙትን ምሳሌዎች ለሞመከር በዩንኮድ ላይ የተመሠረተ ፎንት ይጠይቃል። ጥቂት ፎንቶች በኢንተርነት አካባቢ ይገኛሉ። ይህ ጥናት የተሞከረው «ኢትዮጵያ ጅረት» ተብሎ በሚጠራ ፎንት ነው። ነፃ ከመሆኑም በላይ ከዚህ አድራሻ መገልበጥ ይቻላል።
  Ethiopia Jiret ከዚህ ይገልብጡ!
• የጥናቱ ምሳሌዎች
  በጥናቱ ውስጥ የቀረቡት ምሳሌዎች በሙሉ ለግልበጣ በዚፕ መልክ ተጠናቅረዋል። ምሳሌዎችን ከዚህ ይገልብጡ!

1.2 SVG ሥዕል ነደፋ

ተለምዷዊ የመሣያ መሣሪያዎች እርሳስን፥ ቡርሽን፥ ቀለምንና ሌሎችን ይጨምራሉ። ሠዓሊዎች እነሱን በመጠቀም ወረቀት ላይ፥ ግድግዳ ላይ ወይም ጨርቅ ላይ ሥራቸውን ያሠፍራሉ። ሁሉም የእጅ ሥራ ነው። SVG ግን ከዚህ ተለምዷዊ አሠራር በብዙ መንገድ ይለያል። የሠዓሊው መሣሪያዎች በ«መመሪያ ቃል» ተተክተዋል። ወረቀቶቹና ሌሎችም በ«ሞኒተር ገጽ» እና «ማተሚያ» ተተክተዋል።

1.2.1 እርሳስና ወረቀት

የSVG ሠዓሊ እርሳሱና ብሩሹ እንዲሁም ቀለሙ የSVG የ«ሥዕል-ቃላት» ናቸው። ወረቀቱ ወይም ሉኩ ደግሞ የሞኒተሩ ገጽ ነው። መቅረጽ የሚሻውን በእጁ ፈንታ በመመሪያ ይገልጻል። ተገቢውን መመሪያ አስከሰጠ ድረስ፥ እውን ሥራውን የሚሠራው ኮምፕዩተሩ ነው። የሥዕል-ቃላቱ ግልጽና የማያሻም ትርጉም ስላላቸው ባጠቃቀም ዘንድ ግር አይሉም።

1.2.2 የSVG ቃል አገባብና አጻጻፍ

የSVG የ«ሥዕል-ቃላት» አጻጻፍ፥ አገባብና አጠቃቀም በደንብ ላይ የተመሠረተ ነው። ደንቡ የሥዕል-ቃላቱን ሰዋሰውና መዝገበ-ቃላት እንዴት አድረገን መጠቀም እንዳለብን በግልጽ ያስቀምጣል። በዚህ ክፍል ራሳችንን ከሥዕል-ቃላቱ አጻጻፍ ጋራ እናስተዋውቃለን። ሁሉንም ለማወቅና ለመርመር የደንቡ ሰነድ እነሆ፦ SVG 1.1

መንደርደሪያ ይሆነን ዘንድ ከዚህ ምሳሌ እንነሳ።

  <text x="36" y="100">
     This is a text content.
  </text>

				

በግራና በቀኝ (<>) ምልክት የታጠሩት የሥዕል-ቃላት ናቸው። የመጀመሪያው ከፋች ሥዕላዊ-ቃል ሲሆን የመጨረሻው ደግሞ ዘጊ ሥዕላዊ-ቃል ነው። የ«/» ምልክት ከፊቱ የጨመረው ዘጊው ቃል ነው። በXML ሕግ መሠረት ከፋች ቃል ያለዘጊ ወይም ዘጊ ቃል ያለከፋች አይፈቀድም።

በሁለቱ መካከል የታቀፈው ንባብ (ተነባቢ ፊደል) (text) ነው። የ<text> ዓላማ ንባብን ወይም ፊደልን በሞኒተሩ ገጽ ላይ መሣል ሲሆን ፊደል መጻፍ ስንፈልግ የምንጠቀመው እሱን ነው። ወደ በኃላ የምንመለከታቸው አብረውት ሊሠሩ የሚችሉ ሌሎች አሉ።

አንባቢው እንደሚያየው፥ የከፋቹ ቃል ሁለት ቁጥሮች ይጠቅሳል። አንደኛው የx-አክሰስ ነጥብ ሲሆን ሁለተኛው ደግሞ የy-አክሰስ ነጥብ ነው። ንባቡ በሞኒተር ገጹ ላይ የት ጀመሮ መጻፍ እንዳለበት የሚያስታውቁት እነዚህ ናቸው። ሌላ ምሳሌ እንመልከት።

   <circle cx="200" cy="200" r="100" fill="black">
   </circle>

				

ይህ ሥዕላዊ-ቃል ክብ ይሠራል። በከፋቹ ቃል ያሉት የመጀመሪያዎቹ ሁለት ነጥቦች ማለትም cx እና cy የክቡን መኸከል ሲጠቁሙ r ደግሞ የክቡን ሬድየስ ይሰጣል። የመጨረሻው፥ ክቡ በጥቁር ቀለም መሞላት እንዳለበት ይናገራል። ይኸን ሥዕላዊ-ቃል በፊቱ ካየነው ምሳሌ ከሚለዩት መካከል አንዱ ይዘት አለማቀፉ ነው። ከዚህ የምንማረው፥ ሁሉም የሥዕል-ቃላት የግድ ይዘት ማቀፍ የለባቸውም። በተጨማሪ አንድ የሥዕል-ቃል ይዘት ከሌለው ራሱን በጭር መንገድ መግለጽ ይችላል። ለምሳሌ፦

   <circle cx="200" cy="200" r="100" fill="black"/>

				

ራሱን የቻለ ዘጊ-ቃል ከመስጠት ይልቅ፥ ከግራው የአንግል ብራኬት በፊት «/» በማስገባት ቃሉን ከፋችን ዘጊ ማድረግ ይቻላል። ስለሆነም፥ ይዘት የሌለው ሥዕላዊ-ቃል በዚህ አጭር መንገድ መጻፉ ስህተት አይሆንም። ተለምዷዊው አሠራር እሱ ነው።

1.2.3 የሥዕል አሠፋፈር (Coordinate System)

ሥዕሎች የሚሣሉበት ቦታ ግልጽና በውል የታወቀ ነው። ቦታውን፥ ቢከፋም ቢበጅም፥ ከዚህ በኃላ «ሉክ» ብለን እንጠራዋለን። አንድ ሉክ የሞኒተሩን ገጽ ሙሉ በሙሉ ወይም በከፊል እንዲሁም ከልክ በላይ ሊሸፍን ይችላል። እንደ ሠዓሊው ፍላጐት። በንድፈ-ሀሳብ ደረጃ፥ በSVG ረገድ የሉክ ስፋትና ቁመት ወሰን ላይኖረው ይችላል። የሉኩን ስፋትና ቁመት የመወሰኑ ኃላፊነት የሠዓሊው ነው። ሥዕሎቻችንን በሥነ ሥርዓት እንሥል ዘንድ የሉኩን ሁለመና መቆጣጠር እንችላለን። በመጀመሪያ የሉክን ስፋትና ቁመት እንዴት እንደምንለካ እንመልከት።

የSVG ሉክ በx-አክሰስና በy-አክሰስ ላይ የተቀሰተ ነው። ሁለቱ አክሰሶች በስተግራ በኩል ከላይ ካለው ጠርዝ ይገናኛሉ። ሁለቱ የሚገናኙበት ጠርዝ በ(x,y) ረገድ (0,0) ተብሎ ይለካል። ይህ የመነሻ ነጥብ ነው። እኛ ከፈለግን ከዛ አንስትን ሌላ ቦታ ላይ መትከል እንችላለን። ወደፊት ይኸን የሚያደርግ ምሳሌ እናያለን። በx-አክሰስ ረገድ ከግራ ወደቀኝ ልኩ እየጨመረ ይሄዳል። በy-አክሰስ በኩል ከላይ ወደታች ልኩ እየጨመረ ይመጣል። ለምሳሌ የሚከተለው የሥዕል-ቃል መስመሩ ከየት ተጀምሮ የት ድረስ መሰመር እንዳለበት ይገልጻል። መነሻና መድረሻ ነጥቡ በx-አክሰስና በy-አክሰስ ረገድ መሰጠት አለበት። በሌላ መንገድ ቃሉን ብንገልጸው፦ ከ (10, 10) ጀምረህ እስከ (100,100) ድረስ መስመር ሥራ ይሆናል።

   <line x1="10" y1="10" x2="100" y2="100"/>

				

እንዲህ አይነት የቦታ አቀማመጥና አለካክ ዘይቤ «ካርትዣን ስልት» ተብሎ ይጠራል። ስሙ በስልቱ ፈልሳፊ «ከርትሰስ ዴካርትስ» የተሰየመ ነው።

1.2.4 የSVG ቃል አጠቃላይ መዋቅር

የSVG ቃል መሠረታዊ መዋቅር አለው። ሁሉም አንድ አይነት መጀመሪያና መጨረሻ አለው። እናም ይኸን «ይመስላል»።

   <svg xmlns="http://www.w3.org/2000/svg">
	   ...
   </svg>
	
				

የመጀመሪያው ከፋች ቃል ሲሆን የመጨረሻው ደግሞ ዘጊ ቃል ነው። በሁለቱ መካከል ሌሎች የሥዕል-ቃላት ይገባሉ። ይህ መዋቅር ሕጋዊና ሁለመናዊ ነው። መጣስ ወይም መቀየር አይፈቀደም። በከፋቹ ቃል ውስጥ ስላለው ነገር ወደፊት እንመለስበታለን። ለጊዜው መሠረታዊው መዋቅር ላይ እናተኩር። ይህ መዋቅር ትርጉም የሚኖረው፥ በርግጥ ሥዕሎችን መሣል ስንጀምር ነው። ተግባራዊ መሳሌ እነሆ።

01.	<svg xmlns="http://www.w3.org/2000/svg">
02.	   <rect x="10" y="10" width="500" height="180" fill="navy"/>
03.
04.	   <text x="36" y="100">
05.	      Text at (36, 100) position
06.	   </text>
07.	</svg>

				

1. የመጀመሪያውና የመጨረሻው የሥዕል-ቃል (01 እና 07) ማንኛውም የSVG ይዘት ሊኖረው የሚገባ ነው። ዓላማቸው ሌሎችን የሥዕል-ቃላት እንደ ድንበር ሆነው ያገለግላሉ። ያለነሱ ምንም አይነት የSVG መመሪያ መጻፍ አይቻልም።
2. የ<rect>ቃል በጥቁር-ሰማያዊ ቀለም የተሞላ ምኡዝን ይሠራል። ስፋቱ 500 ፒክስል ሲሆን ቁመቱ ደግሞ 180 ፒክስል ነው። የ<text> ቃል ንባቡን (ያቀፈውን ይዘት) በ x-አክሰስ 36 ነጥብ ላይ፥ በ y-አክሰስ 100 ነጥብ ላይ ጀምሮ ይጽፋል። ምሳሌውን በተግባር ለማየት ሥዕሉ እነሆ።

1.2.5 SVG በራሱ ፋይል ወይስ ከHTML ጋር

s SVGን በሁለት መንገድ ማጠናቀር እንችላለን። ለብቻው ወይም ከHTML ጋራ። ሁለቱም ለይቅል የሆነ ጠቀሜታ አላቸው።

1. በራሱ ፋይል፦ ሥራችንን በራሱ ፋይል ማጠናቀር እንችላለን። ግዴታዎቻችን የሚከተሉት ናቸው።

   1. በፋይሉ የመጀመሪያው መስመር የXML አዋጅ መሆን አለበት።

      <?xml version="1." encoding="UTF-8" ?>

   2. ቀጥሎ፥ የSVGን ደንብ የሚያጣቅስ ቃል።

      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

   3. ሁሉም ሥዕላዊ-ቃላት በ<svg> ቃል መታቀፍ አለባቸው።
2. ከHTML ጋር፦ ሥዕሎቻችንን ከHTML ጋር የምናያይዝበት ሁለት መንገዶች አሉ።
   1. አንደኛው መንገድ፥ ሥዕላዊ-ቃላቱን በሙሉ በሙሉ በHTML ፋይላችን ውስጥ ባካል እንድንከት ይፈቀዳል። ከለይ የተጠቀሱት ሁለት ግዴታዎች፥ (a) እና (b) ግን አይፈለጉም።
   2. ሁለተኛው መንገድ፥ የሥዕል-ቃላቱን በራሳቸው ፋይል እናጠናቅርና ከHTML ፋይላችን ጋር እናዛምዳቸዋለን። የዝምድናው ቃል ይኸን ይመስላል።

      <embed width="400" height="200" src="svg_image.svg"/>

      ከዌብ መቃኛው ቦታ የሚፈለገው ሥፍራ፥ የወርዱ ስፋት 400፥ የቁመቱ ርዝመት 200 ፒክስል የሆነ ነው። በዚህ ክልል ውስጥ መሣል ያለበት የሥዕል-ቃል የሚመጣው ከ«svg_image.svg» ነው። ያዛማጁ ቃል የሚገባው የHTML ፋይል ውስጥ ነው። ተግባራዊ ምሳሌ እነሆ።