home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

จะใช้ภาพ SVG ใน HTML5 ได้อย่างไร?

หากต้องการใช้รูปภาพ SVG ใน HTML5 ให้ใช้ องค์ประกอบหรือ ในการเพิ่มไฟล์ SVG คุณสามารถใช้ หรือ องค์ประกอบใน HTML เลือกอย่างใดอย่างหนึ่งตามความต้องการของคุณ

คุณสามารถเพิ่มรูปภาพ SVG ได้ด้วยวิธีต่อไปนี้ หากบันทึก SVG เป็นไฟล์ จะสามารถใช้เป็นรูปภาพ SVG ได้โดยตรง:

จะใช้ภาพ SVG ใน HTML5 ได้อย่างไร?

ตัวอย่าง

คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อใช้รูปภาพ SVG

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG Image</title>
   </head>
   <body>
      <h2 align="center">HTML5 SVG Image</h2>
      <img src="https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg" alt="smile" height="100px" width="100px" />
   </body>
</html>