พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน svg Tag

<svg> (Scalable Vector Graphics) เป็นแท็กที่ใช้สำหรับการแสดงผลกราฟิกแบบเวกเตอร์ใน HTML5 กราฟิกแบบเวกเตอร์จะมีความยืดหยุ่น เพราะสามารถขยายหรือย่อขนาดได้โดยไม่สูญเสียความคมชัด เหมาะสำหรับการใช้กับโลโก้, ไอคอน, แผนภาพ, และกราฟิกที่ต้องการความคมชัดสูง

การใช้งาน <svg> Tag นั้นสามารถแสดงผลกราฟิกด้วยคำสั่งที่มีลักษณะเป็นโค้ด ซึ่งสามารถควบคุมรูปร่าง สี ขนาด และตำแหน่งของกราฟิกได้

การใช้งาน <svg> Tag ทั่วไป

ตัวอย่างต่อไปนี้แสดงการใช้งาน <svg> เพื่อสร้างรูปแบบต่าง ๆ ที่สามารถประยุกต์ใช้ได้

การสร้างรูปทรงเรขาคณิต

  • สามารถสร้างรูปทรงต่าง ๆ เช่น วงกลม สี่เหลี่ยม สามเหลี่ยม ได้ด้วยโค้ด
HTML
<svg width="200" height="200">
    <!-- วงกลม -->
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    <!-- สี่เหลี่ยม -->
    <rect x="100" y="100" width="50" height="50" stroke="blue" stroke-width="2" fill="yellow" />
    <!-- เส้นตรง -->
    <line x1="0" y1="0" x2="200" y2="200" stroke="green" stroke-width="2" />
</svg>
  • คำสั่ง circle, rect, และ line ใช้สำหรับการสร้างวงกลม, สี่เหลี่ยม และเส้นตรง

การสร้างเส้นโค้ง (Path)

  • <path> ช่วยให้สามารถสร้างรูปทรงที่ซับซ้อนได้มากขึ้น โดยการกำหนดเส้นโค้งและเส้นตรงตามที่ต้องการ
HTML
<svg width="200" height="200">
    <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" />
</svg>
  • M คือการย้ายตำแหน่งไปยังจุด (10, 80) และ C คือคำสั่งสร้างเส้นโค้ง

การใช้ข้อความ (Text) ใน SVG

  • สามารถเพิ่มข้อความในกราฟิกได้ โดยใช้ <text>
HTML
<svg width="200" height="100">
    <text x="10" y="40" font-family="Arial" font-size="24" fill="blue">Hello SVG!</text>
</svg>
  • ข้อความในตัวอย่างนี้จะถูกแสดงในตำแหน่ง (10, 40) ด้วยฟอนต์ Arial และขนาดตัวอักษร 24px

การใช้กราฟิกแบบเวกเตอร์เป็นภาพพื้นหลัง (Background)

  • สามารถใช้ SVG ภายใน CSS สำหรับการทำเป็นภาพพื้นหลังได้
CSS
div {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="blue"/></svg>');
}

การใช้ฟิลเตอร์ (Filters) กับ SVG

  • สามารถเพิ่มฟิลเตอร์เพื่อสร้างเอฟเฟกต์ต่าง ๆ เช่น การเบลอได้
HTML
<svg width="200" height="200">
    <defs>
        <filter id="blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>
    <rect x="10" y="10" width="100" height="100" style="filter:url(#blur)" fill="green" />
</svg>

การนำเข้า SVG ไฟล์ภายนอก

  • สามารถนำเข้าไฟล์ SVG จากภายนอกได้โดยใช้ <img> หรือ <object>
HTML
<img src="image.svg" alt="My SVG Image" />

การประยุกต์ใช้ SVG

  1. ไอคอนแบบเวกเตอร์: ใช้เพื่อสร้างไอคอนที่ปรับขนาดได้โดยไม่เสียความคมชัด
  2. โลโก้เว็บไซต์: ใช้ SVG สำหรับโลโก้ที่ต้องการความคมชัดสูง ไม่ว่าจะอยู่ในหน้าจอความละเอียดสูงหรือไม่
  3. แผนภาพข้อมูล (Infographics): สร้างกราฟ แผนภาพ หรือไดอะแกรมที่สามารถปรับขนาดได้โดยไม่เสียคุณภาพ
  4. กราฟิกเคลื่อนไหว (Animation): ใช้ SVG ร่วมกับ CSS หรือ JavaScript เพื่อสร้างภาพเคลื่อนไหวได้
Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ