SVG คืออะไร? พื้นฐานที่คนทำเว็บต้องรู้

PND777

SVG คืออะไร ? ปัจจุบันไฟล์ภาพนามสกุล SVG ถือเป็นนามสกุลที่ได้รับความนิยมมากทั้งในการออกแบบและการใช้งานบนเว็บไซต์ในปัจจุบัน สำหรับเพื่อน ๆ คนไหนที่กำลังสงสัยว่า SVG คืออะไร ใช้งานยังไง วันนี้พวกเรา Designil จะมาแชร์ความรู้พื้นฐานที่จำเป็นต้องรู้ก่อนออกแบบและใช้งาน เพื่อให้เพื่อน ๆ นำความรู้ที่ได้สร้างเว็บไซต์ที่ดีแก่ user ทุกประเภท

SVG คืออะไร?

SVG (Scalable Vector Graphics) คือภาพกราฟิกแบบ vector 2 มิติ ที่ใช้ในการแสดงผลหน้าเว็บไซต์ โดยแต่ละองค์ประกอบของภาพจะถูกสร้างขึ้นจากสมการทางคณิตศาสตร์ ทำให้ไม่ว่าจะเคลื่อนย้าย หรือย่อขยายภาพ รูปทรงและความละเอียดก็จะไม่มีการเปลี่ยนแปลง ซึ่งจะแตกต่างจาก ภาพกราฟิกแบบ Raster (Bitmap) ที่จะมีการแสดงผลโดยให้แต่ละพิกเซลเก็บค่าสีที่เจาะจงในแต่ละตำแหน่ง ดังนั้นเมื่อเราทำการเคลื่อนย้าย หรือย่อขยายภาพ ความละเอียดของภาพก็จะลดลงตามไปด้วยเช่นกัน ตัวอย่างเช่น ไฟล์ที่มีนามสกุล .JPEG, .PNG เป็นต้น

อธิบายง่าย ๆ ไฟล์ภาพ SVG นี้จะช่วยทำให้ภาพของเราคมชัดตลอดเวลา ย่อขยายไม่แตก ไม่เบลอ เหมาะสำหรับนำไปใช้งานกับเว็บไซต์หรือแอพที่ต้องแสดงผลบนหลากหลาย Device ภาพของเราจะได้คมชัดไปในทุก ๆ หน้าจอนั่นเองครับ

SVG คืออะไร vector vs raster
Vector vs Raster

แต่ก็ไม่ใช่ว่ากราฟิกแบบ SVG จะมีข้อดีเพียงอย่างเดียว แต่ไฟล์ภาพแบบนี้ก็มีข้อเสียเหมือนกันนะครับ เรามาดูข้อดีข้อเสียกันเลย

ข้อดี/ข้อเสียของ SVG

ข้อดี

  1. มีความละเอียดสูงในทุก Responsive
  2. มีขนาดไฟล์ที่เล็กกว่า Raster
  3. สามารถใช้ CSS ในการแก้ไขหรือตกแต่งได้ เช่น เปลี่ยนสีบางส่วน บนบางหน้าจอ โดยไม่ต้องเปลี่ยนภาพ, เหมาะกับการทำ dark ui design
  4. สามารถใช้ Javascript ในการสร้าง Interaction กับผู้ใช้งานได้
svg png jpg
เปรียบเทียบขนาดไฟล์ SVG. PNG, JPEG

ข้อเสีย

  1. ไม่รองรับบาง Browser เช่น Internet Explorer เวอร์ชั่น 9 ลงมา หรือ Android V3.0 ลงมา
  2. อาจทำให้เว็บไซต์มีประสิทธิภาพต่ำลง ถ้าในหน้านั้นมีภาพ SVG อยู่หลายภาพเนื่องจาก Web browser จะต้องคำนวณสมการใหม่ทุกครั้ง

รูปภาพ SVG สามารถสร้างขึ้นด้วย XML(Extensible Markup Language) XML คือภาษาหนึ่งที่ใช้ในการแสดงผลและเก็บข้อมูลข้อมูล ซึ่งจะแตกต่างจากภาษา HTML ที่ถูกออกแบบมาเพื่อใช้ในการแสดงผลอย่างเดียวเท่านั้น เนื่องด้วยรูปภาพ SVG นั้นประกอบไปด้วย XML ที่เขียนจาก Text file ทำให้เราสามารถแก้ไขรูปภาพได้ทันทีด้วย Text editor ตามปกติ เช่น notepad หรือจะใช้ Software ช่วยเพื่อให้ง่ายขึ้นก็ได้

ในปัจจุบันนี้ Browser รุ่นใหม่ ๆ ได้รองรับการใช้งานรูปภาพแบบ SVG โดยเพิ่มส่วนของ SVG support เอาไว้ทั้งหมดในหลาย OS แล้วไม่ว่าจะเป็น Firefox, Chrome, Edge เป็นต้น

หัวข้อต่อไปแอดจะมาแนะนำเว็บไซต์ที่แจก icon SVG ให้ใช้ฟรีกัน ซึ่งส่วนใหญ่แอดจะใช้ในการออกแบบ Prototype เพื่อเป็นแบบในการออกแบบจริง

เว็บไซต์แจก icon SVG ให้ใช้ฟรี

  1. flaticon
  2. iconfinder
  3. freepicon
  4. freepik
  5. icon8
flaticon : SVG icon dowloaded platform.
flaticon

ถ้าใครมีเว็บไซต์อื่น ๆ นอกจาก 4 เว็บนี้ที่แจก SVG ฟรีแนะนำในคอมเมนต์ได้นะครับ เดวแอดจะลองไปใช้ดูบ้าง

บทความที่เกี่ยวข้อง ไอคอน ฟรี! สำหรับออกแบบเว็บไซต์

วิธีนำภาพ SVG ไปใช้ในการพัฒนาเว็บไซต์

1. inline

วิธีแรกเราสามารถนำ Code SVG ในส่วนของ <svg> </svg> tag ที่ได้จากการเปิดด้วย Text editor(notepad) มาใส่ใน <body> ของ HTML document ได้โดยตรง ตามตัวอย่าง

svg code
SVG ที่เปิดด้วย Texteditor(notepad)
<body>
 // Paste the SVG code here.
</body>

ถ้าเพื่อน ๆ ใช้วิธีนี้จะทำให้เวลาในการโหลดหน้าเว็บไซต์ลดลง เพราะ ตัวภาพกราฟิก SVG ได้ฝังลงไปใน HTML document ทำให้ไม่ต้องทำ HTTP request เพิ่มเติม แต่ถึงอย่างนั้นก็ยังมีข้อเสียตรงที่ว่า ตัว HTML จะมีขนาดใหญ่เกิน ซึ่งเกิดจากที่เราไม่สามารถที่ จะ cache ได้นั่นเอง

เพื่อนบางคนอาจจะสงสัยถึงขนาดของ SVG ว่าเราจะสามารถลดขนาดอีกได้ไหม แอดก็ต้องว่า”ได้ครับ” ที่จริงแล้วตัว SVG code มีขนาดเล็กแต่ว่าภาพ SVG ส่วนใหญ่ที่มาจากโปรแกรม Adobe Illustrator จะมีขนาดใหญ่ขึ้นจาก DOCTYPE หรือ Code เพิ่มเติม แอดได้ไปอ่านบทความหนึ่งที่เกี่ยวข้องกับการลดขนาด SVG ทำให้พบเว็บไซต์ที่ช่วยแก้ปัญหานี้นั่นคือ SVG-Optimiser ส่วนวิธีใช้คือนำ SVG code เก่าใส่เข้าไปในหน้าเว็บไซต์ แล้ว download SVG code ใหม่มาใช้ สำหรับเพื่อน ๆ ที่ยังไม่เข้าใจวิธีใช้ก็สามารถศึกษาเพิ่มเติมได้ที่ Kyle Foster’s video ได้ครับ


2. <img>

วิธีที่สองคือการนำ ไฟล์ภาพ SVG ไปใส่เป็น Source ของ <img> tag โดยตรง ซึ่งนี่น่าจะเป็นวิธีที่ง่ายที่สุดและสามารถทำ cache ได้ด้วย

<img src="COVID_19.svg" alt="COVID-19">

ซึ่งถ้าเพื่อน ๆ ไม่ได้กำหนดขนาดของ <img> HTML จะคิดว่าใช้ขนาดตามไฟล์ภาพ SVG เดิมนะ

ข้อเสียของวิธีนี้คือ ยังมีข้อจำกัดบางส่วนในการใช้ CSS และ JavaScript ในการตกแต่ง Style ภาพ SVG อยู่


3. CSS background-image

วิธีนี้จะคล้ายกับวิธีข้างบน แต่เราใช้ CSS คำสั่ง background-image แทน HTML <img> tag

body {
  background-image: url(COVID_19.svg);
}

ถ้าเราต้องการกำหนดขนาดจำเป็นต้องกำหนด background-size ด้วย พราะไม่เช่นนั้นภาพ SVG ที่แสดงออกมาจะมีการตัดออกบางส่วน

body {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background-image: url(COVID_19.svg);
  background-size: 100px 82px;
}

ด้วยความที่วิธีนี้มีความคล้ายคลึงกับวิธีข้างบนทำให้มีข้อเสียที่ข้อจำกัดบางส่วนในการใช้ CSS และ JavaScriptเช่นกัน


4. <Object>

วิธีต่อมาจะเป็นการใช้ <object> ในการเพิ่มภาพ SVG ตาม code ข้างล่างเลย

<object data="COVID_19.svg" width="30" height="30"> </object>

วิธีนี้ทำงานกับได้ดี cache และมี browser support มากกว่าวิธีอื่น แต่ไม่สามารถใช้ CSS stylesheet ที่มาจากภายนอกได้ใน document วิธีแก้คือใช้ <style> ในไฟล์ SVG แทน

<svg...>
   <style>

   </style>
</svg>

5. <iframe>

วิธีรองสุดท้าย ต้องบอกเลยว่าวิธีนี้ไม่ค่อยเป็นที่นิยมและไม่แนะนำซักเท่าไหร่ คือการใช้ <iframe> ใน body ของ HTML document ตาม code ตัวอย่างข้างล่างนี้

<body>
    <iframe src="COVID_19.svg" width="40px" height="40px"></iframe>
</body>

โดยเหตุผลที่แอดไม่แนะนำก็เพราะว่า มันยากต่อการ maintainance และส่งผลเสียต่อ SEO(Search Engine Optimization)ของ Website เพื่อน ๆ ด้วย อีกข้อนึงที่เป็นปัญหาใหญ่คือเราไม่สามารถปรับขนาดภาพได้ ซึ่งมันขัดแย้งกับความเป็น SVG โดยทันที


6. <embed>

วิธีสุดท้ายก็เป็นอีกวิธีหนึ่งที่ไม่แนะนำอีกแล้ว (แล้วใส่มาทำไม !!!) คือการใช้ <embed> ใน body ของ HTML document ซึ่งมีข้อเสียตรงที่ browser ส่วนใหญ่ในปัจจุบันไม่รองรับกับวิธีนี้ งั้นแสดงว่าถ้าเพื่อนไม่อยากให้คนส่วนใหญ่เห็นภาพ SVG คุณ จงใช้วิธีนี้

<body>
    <embed src="happy.svg" />
</body>

กำหนด SVG fallback ให้กับ browser

การกำหนด Fallback คือการป้องกันภาพ SVG ไม่แสดงขึ้นมาในกรณีที่ browser ไม่รองรับภาพ SVG ซึ่งมีจำนวนประชากรที่ใช้อยู่ 5% ของประชากรทั้งหมด ถ้าต้องการสร้างประสบการณ์ที่ดีให้กับ user ทุกคน การกำหนด fallback ถือว่าเป็นสิ่งสำคัญมากเช่นกัน

ต้องขอขอบคุณ Amelia Bellamy-Royds ที่แบ่งปันความรู้ดีดีแบบนี้ด้วยครับ

ควรใช้ SVG fallback แบบไหนถึงจะเหมาะสมที่สุด

1. No fallback

ถ้าภาพ SVG เป็น icon ที่มีคำอธิบายที่ชัดเจนอยู่แล้ว เพื่อนสามารถที่จะปล่อยให้ภาพ SVG หายไปโดยไม่กระทบ Website ของเพื่อนได้

2. Text fallback

ถ้าภาพ SVG เป็น icon ที่มีคำอธิบาย ให้ใช้ข้อความ (alt text) ปรากฎแทนภาพ SVG

3. Image fallback

เป็นวิธีที่นิยมมากที่สุด บางคนเรียกว่า SVG fallback เลย ซึ่งนั่นก็คือการใช้ภาพกราฟิก Raster มาแทนเช่น .PNG, .GIF ซึ่งจะทำให้ขนาดไฟล์ภาพใหญ่ขึ้นและมีความละเอียดที่ต่ำลง

4. Interactive fallback

ในการใช้ SVG ที่มี Animation หรือ Interaction ควรใช้ Graphic language ที่มี Interaction DOM มาแทนที่


ต่อไปจะเป็นส่วนของการเขียน Code กำหนด SVG fallback ซึ่งเราเลิอกจะใช้วิธีไหนก็ขึ้นอยู่กับวิธีนำภาพ SVG ไปใช้ตามข้างบน

1. <img> + Modernizr

เราได้เพื่มในส่วน data-fallback ไปใน <img> ซึ่งเป็นการ source เวลา fallback ด้วยภาพ .PNG ตามตัวอย่าง

<img src="COVID_19.svg" alt="COVID-19" data-fallback="COVID_19.png">

แล้วสร้าง function ทดสอบ browser ด้วย javascript ตาม code ข้างล่างนี้

function svgasimg() {
  return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1");
}

หลังจากนั้นให้เขียนเงื่อนไขตรวจสอบถ้าพบว่า browser ไม่ support ก็จะเปลี่ยนไฟล์ภาพจาก SVG เป็น PNG แทน ตามตัวอย่าง ก็จะเสร็จสมบูรณ์

if (!svgasimg()){
  var e = document.getElementsByTagName("img");
  if (!e.length){
    e = document.getElementsByTagName("IMG");
  }
  for (var i=0, n=e.length; i<n; i++){
    var img = e[i],
        src = img.getAttribute("src");
    if (src.match(/svgz?$/)) {
      /* URL ends in svg or svgz */
      img.setAttribute("src", 
             img.getAttribute("data-fallback"));
    }
  }    
}

ถ้าเพื่อนไม่เข้าใจ แอดก็มีอีกวิธีหนึ่งที่ง่ายกว่านั่นคือการใช้ Modernizr + JQuery ตามตัวอย่างนี้เลย

if (!Modernizr.svg) {
  $("img[src$='.svg']")
    .attr("src", fallback);
}

2. <object>

เป็นวิธีที่ใช้คู่กับวิธีนำ SVG ไปใช้แบบ <object> ด้วยการนำ <img> ไปใส่ใน <object> ตาม code ข้างล่าง ซึ่งเมื่อ browser ไม่รองรับ SVG นี้ก็จะแสดงไฟล์ภาพ PNG แทน

<object type="image/svg+xml" data="svg-ok.svg">
  <img src="fallback.png" alt="No SVG support">
</object>

อีกแบบจะเป็นการนำ Text มาแสดงแทนภาพ SVG

<object type="image/svg+xml" data="svg-ok.svg">
  <p class="warning">
    Your browser does not support SVG!
  </p>
</object>

3. inline

มาถึงวิธีการกำหนด SVG fallbackที่เป็นที่นิยมมากที่สุดกับ inline วิธีแรกคือการนำ <image> ใส่ใน <svg> ใช้ src เป็นตัว source กับไฟล์ภาพ PNG ส่วน SVG ใช้ xlink:href แทน

<svg viewBox="-20 -20 40 40">
  <!-- SVG code snipped -->
  <image xlink:href="fallback.svg" src="fallback.png" xlink:href="" />
</svg>

วิธีต่อจะเป็นการ Text fallback ใช้ <desc>ซึ่งเป็น SVG container ที่ใช้อธิบาย Text ยาว ๆ ซึ่งไม่เป็นกราฟิกทำให้แสดงผลได้แม้ browser ไม่รองรับก็ตาม

<svg viewBox="-20 -20 40 40">
  <desc>
    <p class="warning">
        Fallback text.
    </p>
  </desc>

  <!-- ... SVG content ... -->

</svg>

4. CSS background-image

มาถึงกับวิธีสุดท้าย ที่จะเป็นการใช้ CSS syntax background วิธีนี้เป็นวิธีที่ performance ดีที่สุดเมื่อเทียบกับวิธีอื่น

body {
    background: url(fallback.png);
    background: url(background.svg),
    linear-gradient(transparent, transparent);
}

วิธีลดขนาดไฟล์ SVG

ปกติเรามีหลายวิธีมากเลยครับในการลดขนาดไฟล์ภาพ SVG วันนี้ผมขอแนะนำเว็บไซต์ยอดนิยมที่ชุมชนคนทำเว็บแนะนำมาดังต่อไปนี้นะครับ

สำหรับคนที่ต้องการย่อขนาดไฟล์ SVG แบบออนไลน์ ใช้งานง่าย ๆ เพียงแค่อัพโหลดรูปขึ้นไปหรือแปะโค้ด หลังจากนั้นเว็บจะทำการคลีน syntax ของเราให้เรียบร้อย ขนาดเล็ก เอาไปใช้งานต่อได้เลย

  1. SVGOMG
  2. Nano
  3. Kraken
  4. SVG Minifier
  5. SVG optimiser
  6. svg-editor

สำหรับคนใช้ Command tool แนะนำ 3 เว็บนี้ครับ

  1. SVGGO
  2. SCOUR
  3. SVGCleanner
designer svg
designer svg

ภาพปิดท้าย สำหรับ Designers ที่จะส่งงานให้กับ Developer อย่าทำแบบตามภาพนะครับ
คือการใส่ภาพ .png เข้าไปในไฟล์ .svg แล้ว export ให้กับ developer ไม่งั้นอาจจะโดนตีมือได้ครับ ฮาาา


บทความนี้เป็นแค่พื้นฐานที่ทำให้เรารู้จัก SVG มากขึ้น ความรู้เพิ่มเติมเกี่ยวกับ SVG ยังมีอีกมากมาย โดยสามารถเรียนรู้ได้จาก W3school , CSS-Tricks เลยนะครับ จะทำให้เพื่อน ๆ กลายเป็น expert ทางด้าน SVG ในไม่ช้าอย่างแน่นอน

หรือถ้าใครอยากเรียนคอร์สออนไลน์เกี่ยวกับ HTML, CSS
และเรื่องการ Handoff ไฟล์ดีไซน์ให้กับ developer
ผมขอแนะนำคอร์สจาก Udemy ด้านล่างนี้เลยครับ ราคาเริ่มต้นที่ 349 บาท

บทความที่เกี่ยวข้อง

PND777

PND777

จบจากคณะวิศวะคอมพิวเตอร์ สนใจในงาน UX/UI และ Coding มีความฝันว่าอยากจะทำงานบริษัทเกมชื่อดัง
บทความทั้งหมด

One Response

  1. ขอบคุณค่ะ ใช่มาสักพักแบบงูๆปลาๆ วันนี้เ้ข้าใจขึ้นเยอะเลยค่ะ