PHHeto, paano gumawa ng SVG graphics para sa webpages nyo.
USING ADOBE ILLUSTRATOR
*********short info muna*******
meaning: Scalable Vector Graphics
- scalable siya (meaning sharp pa rin kahit maliit or lakihan mo siya hindi nasisira ang resolution)
- ano siya: XML
- saan ginagamit: good for logos, o kaya icons, animations....para sa webpages.
- sample: tignan mo ang "layout.png"...very popular use. Use your imagination pag napag aralan mo na. Isang maliit na icon tapos yung pala kailangan mo rin ng sobrang laking version niya. Instead na gagawa ka ng isang pang file, isang SVG icon na lang gamitin mo.
- ano pa: kung meron na kayong vector graphics dyan, convert nyo sa SVG para sharp lalabas sa webpage nyo
****************************
Step 1) Open your Adobe Illustrator. Type ka lang ng font glyphs (gamit ko "webdings" o kaya gawa ka ng sarili mo manu manu)...(see "p1.png")
Step 2) Convert lang yung mga glyphs into OUTLINE para maging vector graphics na siya.. (hindi na siya editable by font style option)....(see "p2.png")
Step 3) Tapos i-FILE SAVE AS na ....(see "p3.png")
Step 4) Tapos lagyan ng filename at sa file type, select SVG......(huwag SVGZ kasi hahaba ang kuwento ko)....(see "p4.png")
Step 5) Lalabas ang SVG options window (sundan mo lang mga parameters na ginawa ko).... yung ibang parameters puwede mo research kung ano purpose)........(see "p5.png")
Step 6) Bago mo i-save.... i-test mo muna. Una, click mo yung button na "SVG Code" (basahin mo yung XML kung tama lahat ang spelling...lol!)....next...click mo yung "globe" na icon (tapos tignan mo kung nag display ng maayos)...(see "p6.png"). Kung happy ka na sa result, i-OK mo na.
That's it mga ka-tropa. Inuman na!
USING ADOBE ILLUSTRATOR
*********short info muna*******
meaning: Scalable Vector Graphics
- scalable siya (meaning sharp pa rin kahit maliit or lakihan mo siya hindi nasisira ang resolution)
- ano siya: XML
- saan ginagamit: good for logos, o kaya icons, animations....para sa webpages.
- sample: tignan mo ang "layout.png"...very popular use. Use your imagination pag napag aralan mo na. Isang maliit na icon tapos yung pala kailangan mo rin ng sobrang laking version niya. Instead na gagawa ka ng isang pang file, isang SVG icon na lang gamitin mo.
- ano pa: kung meron na kayong vector graphics dyan, convert nyo sa SVG para sharp lalabas sa webpage nyo
****************************
Step 1) Open your Adobe Illustrator. Type ka lang ng font glyphs (gamit ko "webdings" o kaya gawa ka ng sarili mo manu manu)...(see "p1.png")
Step 2) Convert lang yung mga glyphs into OUTLINE para maging vector graphics na siya.. (hindi na siya editable by font style option)....(see "p2.png")
Step 3) Tapos i-FILE SAVE AS na ....(see "p3.png")
Step 4) Tapos lagyan ng filename at sa file type, select SVG......(huwag SVGZ kasi hahaba ang kuwento ko)....(see "p4.png")
Step 5) Lalabas ang SVG options window (sundan mo lang mga parameters na ginawa ko).... yung ibang parameters puwede mo research kung ano purpose)........(see "p5.png")
Step 6) Bago mo i-save.... i-test mo muna. Una, click mo yung button na "SVG Code" (basahin mo yung XML kung tama lahat ang spelling...lol!)....next...click mo yung "globe" na icon (tapos tignan mo kung nag display ng maayos)...(see "p6.png"). Kung happy ka na sa result, i-OK mo na.
That's it mga ka-tropa. Inuman na!
)