Tuesday 27 November 2018

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..

No comments :

Post a Comment