window.addEventListener(‘message’, function (event) {
if (!event.data || event.data.type !== ‘resize’) return;

const iframe = document.getElementById(‘lovable-frame’);
if (iframe && typeof event.data.height === “number”) {
iframe.style.height = event.data.height + “px”;
}
});

ทำไมต้องแปลง SVG เป็น PNG?

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

การแปลง SVG เป็น PNG จะได้รูปภาพที่มีคุณภาพสูงและมีความโปร่งใสที่สามารถใช้ได้บนอุปกรณ์สมัยใหม่ ทุกเว็บเบราว์เซอร์ และเครื่องมือออกแบบ

ข้อดีของการใช้รูปแบบ PNG

• ✅ การบีบอัดที่ไม่สูญเสียคุณภาพ – PNG จะรักษาคุณภาพของรูปภาพโดยไม่มีการสูญเสียภาพ

• ✅ การรองรับความโปร่งใส – เหมาะสำหรับโลโก้ ไอคอน และการออกแบบที่ต้องการพื้นหลังโปร่งใส

• ✅ ความเข้ากันได้ทั่วไป – สามารถแทรกรูปภาพ PNG ได้ง่ายๆ ในเว็บไซต์ การนำเสนอ อีเมล หรือวัสดุพิมพ์

วิธีการใช้เครื่องมือนี้

1. อัปโหลดไฟล์ SVG ของคุณ
   คลิก “เลือกไฟล์ SVG” หรือลากและวางกราฟิกเวกเตอร์ของคุณเข้าไปในกล่องด้านบน

2. การแปลงอัตโนมัติ
   เครื่องมือนี้จะแปลงไฟล์ SVG ของคุณเป็นรูปภาพ PNG ที่มีคุณภาพสูง

3. ดาวน์โหลด PNG
   คลิกปุ่ม ดาวน์โหลด PNG เพื่อบันทึกภาพของคุณลงในอุปกรณ์ของคุณ

4. ใช้ได้ทุกที่
   ไฟล์ PNG ของคุณพร้อมที่จะเผยแพร่ แก้ไข หรือรวมเข้ากับโปรเจ็กต์ใดๆ

คำถามที่พบบ่อย

ความโปร่งใสจากไฟล์ SVG จะถูกเก็บไว้หรือไม่?
ใช่ PNG รองรับความโปร่งใส และเครื่องมือนี้จะเก็บองค์ประกอบที่โปร่งใสใดๆ จากไฟล์ SVG ของคุณ

การบีบอัดที่ไม่สูญเสียคุณภาพหมายถึงอะไร?
การบีบอัดที่ไม่สูญเสียคุณภาพจะลดขนาดไฟล์ โดยไม่ลบข้อมูลภาพใดๆ เพื่อให้รูปภาพที่แปลงแล้วของคุณดูเหมือนเดิมโดยไม่มีการเสื่อมสภาพ

เครื่องมือนี้ฟรีและปลอดภัยหรือไม่?
ใช่ เครื่องมือนี้เป็นเครื่องมือบนเว็บที่ใช้งานได้ฟรีและไฟล์ของคุณจะไม่ได้รับการเก็บหลังการแปลง

ฉันสามารถแปลงเป็นรูปแบบภาพอื่นๆ ได้หรือไม่?
ใช่ คุณสามารถเลือกรูปแบบไฟล์ได้จากตัวเลือกด้านล่าง

.conversion-footer {
font-family: system-ui, sans-serif;
margin: 30px 0;
}

details.convert-dropdown {
margin-bottom: 8px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background-color: #fff;
transition: box-shadow 0.3s;
}

details.convert-dropdown[open] {
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.convert-dropdown summary {
font-weight: 600;
font-size: 15px;
padding: 12px 16px;
background-color: #f7f8f9;
border-bottom: 1px solid #e0e0e0;
cursor: pointer;
list-style: none;
position: relative;
}

.convert-dropdown summary:hover {
background-color: #eef0f2;
}

.convert-dropdown summary::marker {
display: none;
}

.convert-dropdown summary::after {
content: “▾”;
position: absolute;
right: 16px;
font-size: 12px;
transition: transform 0.3s ease;
}

details[open] summary::after {
transform: rotate(180deg);
}

.convert-dropdown a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #0073aa;
font-size: 14px;
border-top: 1px solid #f1f1f1;
transition: background 0.2s;
}

.convert-dropdown a:hover {
background-color: #f1f7fb;
color: #005177;
}