SVG-SCALABLE VECTOR GRAPHIC

Introduction

icons, logo, image leh website leh mobile application-a graphic format tharlam ber leh rinrawl ber ni chho turin W3C-in kum 1999 tang daih tawh khan a lo duang a. Mahse browser te'n an support that tawk loh vangin tunhnai atang deuh chauhvin a rawn lar tan a ni. Web standard dang CSS, DOM leh SMIL(synchronized multimedia integration language) nena hman tura duan a ni a. SVG image, text leh a kaihnawih te hi XML text file hmanga siam a nih avangin programmatically-in zawn(search), chhinchhiah(index), a script ziahchawp te leh compressed te a theih vek a ni. Hei vang hian Text editor eng pawh hmanga edit theih a nih rualin graphic editor Illustrator te, Animate CC leh Photoshop CC leh a dang dang hmang tein edit theih a ni bawk.

SVG chu eng chiah nge a nih a, tunlai hian engtia web standard-ah lo lar chho ta viau nge a nih tih chu a chunga kan sawi atang pawh khian a chiang thawkhat viau awm e. Web leh mobile-a graphic standard dang kan hman tlanglawn ho jpg, png, gif, etc. te nen hian a in ang lo mai ni lovin kawng engkimah an inthlau viau a. Chu chu tun tumah hian sawi kan tum dawn a ni.

A hmasa berin a danglamna chu a hming atang hian a ni a. Scalable Vector Graphic tih hi Zo tawngah kan dah chuan: Scalable: eng size leh resolution pawha dah theih
Vector: stroke & fill (rawng leh rin) hmanga lemziakna.
Graphic: lemziah or thil lem
Tichuan SVG chu rawng leh rin hmanga lemziak a lan dan buai chuang lo va duh ang tiat tiata dah theih tiin kan sawi thei ang. A saptawng chuan Vector Graphic tiin an sawi a. PNG, JPG leh GIF kan tih te hi chu BITMAP GRAPHIC a ni a. Box te reuh te te (grid)-a rawng chi hrang hrang (pixel grid) phuahkhawm hmanga siam an nih avangin leh box te reuh te te te khan rawng chi khat bak an neih theih loh avangin duh ang size leh resolution-a dah ngawt theih a ni lo va. Kan zoom deuh hlek phei chuan a box nen lam khan kan hmu thin a, a thlalak landan a buai ta thin a ni. A pixel a tam kan tih hian a box a tam tihna a ni ber a. A box a tam chuan color chi pawh a nei tam tihna a ni a, a size a len phah hle bawk thin. Hei vang ringawt pawh hian khawih danglam reng tur (edit) atan leh siamchhawn (reproduction) atan an hman tlak loh a ni.

A dawt lehah chuan device leh platform chi hrang a tam chho tawh hle a. Developer te chuan thlalak ngai reng kha device hrang hrang mila a size leh resolution kan siam danglam a tul thin a. Hemi atan hian png, gif, jpg kan hman dawn chuan device hrang hrang mil tura a size leh resolution kan edit kual a ngai thin a. Vanduai thlak takin heng bit graphic te hi chu kan edit apiang hian a resolution (a fiahna) kan paih tel zel a ni. Hetiang buaina hi SVG chuan a ron chingfel ta vek mai a. thlalak ngai reng kha coding hmangin a size leh resolution hloh emaw belh ngai chuang lovin device leh platform hrang hrangah kan hmang thei a ni.

A pathumnaah chuan Thlalak format dang ang lo takin SVG hi code hmangin siam theih a ni a. thlalak zia, kalkawng leh awm dan zawng zawng hi maths hmangin chawhchhuah theih vek a ni a. Vanneihthlak takin chawk thiam kher lo tan pawh graphic editor hmangin kan la siam thei cheu zui bawk.

Palinaah chuan SVG thlalak te hi CSS leh JS hmanga chei leh chettir (animate) theih an ni a. Kan sawi tawh angin animation code-na SMIL a nei ve bawk. Coding vocabulary a ngah hran lo va, zir duh tan pawh zir har lutuk a ni hran lo.

SVG - Standard Graphic Format

Kan sawi tawhin svg hi thlalak a ni a. Heng editor Sketch, Illustrator, etc. hmang hian view, edit leh siam theih a ni a. Image Viewer eng emaw zatin an support tawh a.

1. https://www.designzzz.com/12-best-free-svg-viewers-editors/
2. http://extension.nirsoft.net/svg
ah hian en rawh le. Tin svg hi image pangai kan dah luh angin html-ah dah luh theih a ni bawk.

<img src="logo.svg" />

SVG hi web chauha hman theih tura ngaih tur a ni lo va, print atan hman theih a ni bawk a. 3D printing thlengin an hmang bawk a ni. Open format a nih angin graphic enga tan pawha hman theih a ni tihna a ni ber.

SVG - Coding

SVG hian basic shape chi hrang hrang ziahna vocabulary a nei a. Complex drawing erawh chu hun a heh loh zawk nan graphic editor hmang tih mai a tha zawk ang. Tin complex lem lo chu graphic editor hmanga tih khan a efficient lo zawk thei bawk a ni.

Real code to be continued..

PRODUCTS OF HL SOLUTION

HL School
Management

• CCE Integrated Module
• MBSE IES Result Module
• Monthly Fee Module
• Bulk SMS Module

HL College
Management

• Semester Fee Module
• Rollsheet Module
• Result Module
• Bulk SMS Module

HL Shop
Management (POS)

• Invoice/Quotation Module
• GST Module
• Report/Account Module
• Bulk SMS Module

JAVASCRIPT FOR LOOP DETAIL

Loop hi nested a nih lem loh chuan a har hranpa em em lo va, nested a nih a, condition a tam hian lu a tihai thei viau bawk. Chuvangin loop kalkawng zawng zawng nen lam tilangin tutorial Online lama chhim tur awm lem lo kalphung dang deuhvin sawifiah kan tum ang. Tun tumah hian Vanilla JS for loop hmangin ‘A’ siamchhuah dan hmangin Loop (kalkualna tiin zo tawng chuan ka dah mai a) kan zir dawn a ni.  Kan siamchhuah tur chu lo en phawt ila:

🔪🔪🍏🍏🍏🔪🔪 

🔪🍏🔪🔪🔪🍏🔪

🔪🍏🔪🔪🔪🍏🔪

🔪🍏🍏🍏🍏🍏🔪

🔪🍏🔪🔪🔪🍏🔪

🔪🍏🔪🔪🔪🍏🔪

🔪🍏🔪🔪🔪🍏🔪

Sawifiahna:

Column(tlar phei) leh Row(tlar tung) pasarih ve ve kan nei a. Apple leh chemte rem dan tur a hnuaia mi ang hian i lo sawifiah dawn teh ang.

1. row value (hlutna) hi 1 kan neih tir ang a, 7 a tlin thlengin kan kalkual(loop) tir ang, .
   JS for loop code hmanga kan dah chuan:
   for(let row = 1; row<=7; row++){
       //vawi 7 kan kalkual ang.
   }
2. column value pawh hi a tirah 1 kan neihtir ang a, 7 a tlin thlengin kan kalkual tir ang. Column hi row kan kalkual (loop) tir apiangin vawi 7 kan kalkual (loop) tir ve dawn a ni. Chuvangin row vawi khat kalkual apiangin column vawi 7 kan kalkual (loop) tir ve dawn tihna a nih chu.
   for(let column= 0; column<=6; column++){
       //vawi 7 kan kalkual ang.
   }
3. 1st Row & 7 Columns: Row kalkualna(loop) hmasa berah chemte print chhuak tur chuan column kan ngaihtuah tel a ngai a. Row vawi khat kalkual apiangin column vawi 7 kalkual a ngaih bawk avangin a lema kan hmuh ang hian column vawi khatnaah leh vawi hnih kalkualnaah chemte print chhuah a ngai dawn a, a vawi 3na 4na leh 5-naah erawh chuan apple kan dah a ngai a. Voi 6na leh 7na ah chuan chemte bawk kan dah a ngai dawn a ni. A code-in lo dah dawn ta ila:
   
   if(  ( (column == 1 || column == 2) && row==1) || ((column==6 || column==7) && row==1)){
     //column hlutna chu 1 or 2 or 6 or 7 a nih a, row pakhat chauh a nih chuan
     // str-ah chemte dah tur
     //Column 1 & 2 = 🔪🔪
     //Colomn 6 & 7 = 🔪🔪
   }else{
     //Column 3, 4 & 5 = 🍎 🍎 🍎
   }
   column lo remkhawm ta ila:
   1   2   3   4    5   6   7
   🔪    🔪    🍎    🍎       🍎     🔪    🔪
4.  2nd Row & 7 Columns: Row  vawi hnih kalkualnaah chuan 2 column leh 6th column-ah chauh apple kan dah a ngai a. Condition chi hrang hrangin a siam theih ang. A hnuaia js code hi han bel chiang phawt ila:
   if( (row==2 && column==2) || (column == 6 && row==2)){
      //column 2 =  🍎
      //column 6 = 🍎   
   }else{
      //column 1, 3, 4, 5, 7 =  🔪,🔪,🔪,🔪,🔪
   }
   Hmun khatah column indawt danin lo rem leh ta ila:
   1      2      3      4      5      6      7
   🔪  🍎  🔪   🔪    🔪   🍎 🔪
5. 3rd Row pawh a chunga mi ang bawk hian a condition siam tur a ni a.if( (row==3 && column==2) || (column == 6 && row==3)){
      //column 2 =  🍎
      //column 6 = 🍎   
   }else{
      //column 1, 3, 4, 5, 7 =  🔪,🔪,🔪,🔪,🔪
   }Hmun khatah column indawt danin lo rem leh ta ila:
   1      2      3      4      5      6      7
   🔪  🍎  🔪   🔪    🔪   🍎 🔪
6. 4th Row thungah chuan a lema kan hmuh ang hian tlemin kan condition kan her danglam a ngai dawn a niif( (row==4 && column==1) || (column == 7 && row==4)){
      //column 1 = 🔪   //column 7 = 🔪   
   }else{
      //column 2, 3, 4, 5, 6 =  🍎,🍎,🍎,🍎,🍎
   }Hmun khatah column indawt danin lo rem leh ta ila:
   1      2      3      4      5      6      7
   🔪  🍎  🍎  🍎 🍎  🍎 🔪
7. 5th Row -ah thung chuan row 2 leh row 3 ang chiah khan condition kan siam ang a. a row kha 5th row a ni tih hre tel bawk ila: if( (row==5 && column==2) || (column == 6 && row==5)){
      //column 2 =  🍎
      //column 6 = 🍎   
   }else{
      //column 1, 3, 4, 5, 7 =  🔪,🔪,🔪,🔪,🔪
   }Hmun khatah column indawt danin lo rem leh ta ila:
   1      2      3      4      5      6      7
   🔪  🍎  🔪   🔪    🔪   🍎 🔪
8. 6th Row-ah pawh a chunga mi ang tho hian condition kan siam ang, a row kha 6-ah kan dah thung ang. if( (row==6 && column==2) || (column == 6 && row==6)){
      //column 2 =  🍎
      //column 6 = 🍎   
   }else{
      //column 1, 3, 4, 5, 7 =  🔪,🔪,🔪,🔪,🔪
   }Hmun khatah column indawt danin lo rem leh ta ila:
   1      2      3      4      5      6      7
   🔪  🍎  🔪   🔪    🔪   🍎 🔪
9. 7th Row-ah pawh a chung chiah mi ang hian condition kan siam leh dawn a ni. Row kha 7 kan tluk tir thung ang. if( (row==7 && column==2) || (column == 6 && row==7)){
      //column 2 = 🍎
      //column 6 = 🍎   
   }else{
      //column 1, 3, 4, 5, 7 =  🔪,🔪,🔪,🔪,🔪
   }Hmun khatah column indawt danin lo rem leh ta ila:
   1      2      3      4      5      6      7
   🔪  🍎  🔪   🔪    🔪   🍎 🔪
   
   

A chunga kan condition hrang hrang khi hmun khatah dahkhawm theih a ni a. Point hrang hrang angin lo dah ta ila:

1. Row hmasa ber Column 1 leh 2-ah chuan chemte kan print duh a.
2. Row hmasa ber Colum 3, 4 leh 5-ah apple kan print duh a.
3. Row hmasa ber Column 6 leh 7-ah chemte kan print duh a ni.
4. Row 2 leh 3 ah chuan column 2 leh 6-ah apple print kan duh thung a ni.
   If condition-in lo dah dawn ta ila.
   row 1 = if( row ==1 && (column>2 && column<6)){ }
   row 2 = if( row!=1 && ( column==2 || column==6)){ }
   row 3 = if( row!=1 && ( column==2 || column==6)){ }Hmun khata kan dah chuan:if ( ((column == 2 || column ==6) && row!= 1) 
   || ((row == 1)&& (column>2 && column < 6))){
    // Apple print tura row1-3 inkar kan column condition
    // kan fullfil loh apiang hian chemte kan print dawn a ni
   }
   row 2 leh 3-a condition hi belchiang ta ila row!=1 kan tih hian row 1 ni lo hrim hrim kan sawina a ni ber a.Row 4 ah hian Column 2- column 6 thleng apple kan print duh avangin kan condition ah hian row == 4 kan dahtel a ngai a, a bak chu kan condition ngai kha kan la ring zel thei dawn a ni.if ( ((column == 2 || column ==6) && row!= 1) 
   

     || ((row == 1|| row == 4)&& (column>2 && column < 6)) ){
       //apple printna
   }

Ti chuan A print chhuak tur chuan a hnuaia mi ang loop leh condition kan lo nei thei dawn ta a ni:

let str = "\n"; 

for(let row = 1; row <= 7; row +=1 ){ 

   for (let column = 1; column <= 7; column +=1 ){ 

        if ( ((column == 2 || column ==6) && row!= 1) 

        || ((row == 1|| row == 4)&& (column>2 && column < 6)) ){ 

           str += '🍏';//Apple 

        } else { 

           str += "🔪";//Chemte 

        } 

      }
     str += "\n"; 

  } 

str +="\n";

console.log(str);