รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การใช้ SVG ทำพื้นหลังใสไว้ใช้แทนรูป PNG

    บางครั้งเราต้องการรูปที่สีเยอะ ๆ ด้วย และพื้นหลังใสด้วย การใช้ PNG บางครั้งอาจจะทำให้รูปขนาดใหญ่ระดับ 1 Mb ขึ้นไปก็มีครับ

    วิธีแก้ปัญหา : ทำรูป JPEG พื้นหลังใสด้วย SVG

    เทคนิคนี้ทำได้ง่าย ๆ โดย เซฟกราฟฟิกออกเป็น 2 รูป:
      - รูปแบบ JPEG พื้นหลังติดสีดำ
      - รูป PNG 8-bit มีแค่สีขาวกับดำ โดยสีดำเป็นพื้นที่ที่ต้องการให้ใส

    JPG Transparent PNGจากนั้นก็ใช้ SVG ในการทำ Masking ให้กับรูป JPG โดยใช้รูป PNG มาเป็น Mask ด้วย HTML นี้:

    <svg preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 560 1388">

    <defs>
    <mask id="canTopMask">
    <image width="560" height="1388" xlink:href="img/can-top-alpha.png"></image>
    </mask>
    </defs>
    <image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg"></image>
    </svg>

    โดยเราสามารถนำโค้ดก้อนนี้ไปวางในตำแหน่งที่ต้องการใช้รูปได้เลยครับ ทำงานเหมือนเอา <img> ไปวางนั่นเอง

    อธิบายโค้ดแบบสั้น ๆ คือ ใช้แท็ก <image> ในการใส่รูป JPG (จากข้อ 1) เข้าไป และกำหนด Mask ให้กับรูปนั้นด้วยรูป PNG (จากข้อ 2) ครับ การทำ Masking คือการจำกัดกรอบให้กับรูป ส่วนที่อยู่นอกกรอบก็จะกลายเป็นใสไปครับ

    เท่านี้เราก็จะได้กราฟฟิก JPEG ที่มีพื้นหลังใส และขนาดไฟล์ลดลงไปมากกว่า 75% !!

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com