- ลืมใช้ xhtml ดูเหมือนว่า svg จะใส่ลงไปใน html 4 ธรรมดาลำบากกว่า xhtml
- ลืมเปลี่ยน content-type เวลาส่ง text/html มาเฉยๆ เหมือนมันเจ๊ง ฯ ก็เลยส่ง application/xhtml+xml ไปแทน
- ลืมใช้ header ที่ถูกต้อง หลังมาผมปะอันนี้ไปเลย
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> - ผมมักจะเขียน Javascript ด้วย ก็มักจะลืม //<
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="15cm" height="15cm" viewBox="100, 100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <g transform="translate(50, 100) scale(4)"> <ellipse cx="50" cy="0" rx="50" ry="5" fill="white" stroke-width="1" stroke="black"/> <path d="M0,0 L0,70 100,70 100,0" fill="none" stroke="black" stroke-width="1"/> </g> </svg>
วาดรูปคนเสื่อมๆ โดยคนเสื่อม ด้วย SVG
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="21cm" height="29.7cm" viewBox="0 0 1000 1414" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- person --> <g transform="translate(300, 150) scale(6)"> <!-- body --> <line x1="0" y1="0" x2="0" y2="60" stroke="black" stroke-width="2"/> <!-- legs --> <line x1="0" y1="60" x2="40" y2="90" stroke="black" stroke-width="2"/> <line x1="0" y1="60" x2="-40" y2="90" stroke="black" stroke-width="2"/> <!-- arms --> <line x1="-40" y1="30" x2="40" y2="30" stroke="black" stroke-width="2"/> <!-- head --> <circle stroke="black" stroke-width="2" fill="white" cx="0" cy="0" r="20"/> <!-- eyes --> <circle stroke="black" stroke-width="2" fill="white" cx="-7" cy="-3" r="3"/> <circle stroke="black" stroke-width="2" fill="white" cx="7" cy="-3" r="3"/> <!-- nose --> <line x1="0" y1="3" x2="0" y2="7" stroke="black" stroke-width="2"/> <!-- mouth --> <path d="M-10,10 Q0,20 10,10" fill="none" stroke="black" stroke-width="2"/> </g> </svg>
SVG: Who is on top? ใครอยู่บน
ภาพที่เขียนด้วย SVG มันมีโอกาสจะทับกันได้แล้ว อะไรจะอยู่บน (เราเห็น) อะไรจะอยู่ล่าง (โดนทับ) … คำตอบจากที่ลองใน Firefox คือ มาทีหลังอยู่บน
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="8cm" height="8cm" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="100" y="100" width="150" height="150" fill="orange"/> <circle cx="200" cy="200" r="70" fill="blue" /> </svg>
ถ้าเป็นตัวอย่างข้างบน วงกลม กับ สี่เหลี่ยม มันซ้อนกัน แต่ว่า วงกลม มาทีหลังจึงอยู่บน
สิงหาคม 4, 2010
ย้ายตำแหน่งของ group ใน SVG
ใน Group ของ SVG เราใส่ attribute ชื่อ transform เข้าไปได้ มันขยาย หมุน ย้ายที่ ใส่ matrix เข้าไปคูณอะไรได้สารพัด แต่ว่าแค่ย้ายที่ก็ใช้ transform=”translate(10,20)” แบบนี้ก็จะย้ายไปทางขวา 10 ลงล่าง 20
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="21cm" height="29.7cm" viewBox="0 0 1000 1414"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- ข้างล่าง -->
<g transform="translate(10, 20)">
<text x="10" y="30" font-size="20"
fill="blue">Test</text>
</g>
</svg>
หลังจากที่แปลง svg เป็น eps แล้วข้อความภาษาไทยเจ๊ง
ผมแปลง svg แบบนี้
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="8cm" viewBox="0 0 800 800"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="50" y="150" width="600" height="400" font-size="100" fill="blue">ไทย Thai</text>
</svg>
เปิดด้วย Firefox หรือ Inkscape ก็ดูได้ปกติ แต่พอสั่ง
inkscape -E thaitext1.eps thaitext1.svg
พอเปิดด้วย kghostview แล้วก็ออกมาไม่เป็นภาษาไทย แต่ว่าผมเห็นเวลา inkscape จะ save เป็น .eps เลือกได้ว่าเปลี่ยน text เป็น path ได้ ผมก็เลยไปทำกับ command line บ้าง จึงเปลี่ยนคำสังเป็นแบบนี้
inkscape -E thaitext1.eps --export-text-to-path thaitext1.svg
ก็เป็นอันใช้ได้ 
สิงหาคม 3, 2010
เขียน svg ด้วย text editor แล้วแปลงเป็น eps จาก shell
ผมอยากเขียน svg จาก text editor แต่ว่าพอไปใช้กับ latex มันเป็น eps ก็เลยต้องหาท่าหน่อย ทีแรกก็สร้าง svg ก่อน
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="8cm" viewBox="0 0 800 800"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="100" y="100" width="500" height="500"
fill="yellow" stroke="blue" stroke-width="10"/>
</svg>
ผมก็ save ไว้ใน draw1.svg
แล้วก็สั่งแบบนี้เลย
inkscape -E draw1.eps draw1.svg
ง่ายๆ แล้ว ก็เปิดดูด้วย kghostview แบบนี้
kghostview draw1.eps
เราก็จะดูได้แล้วว่ารูปออกมาแบบไหน
เดี๋ยวต่อไปก็จะลองดูพวกอักษรภาษาไทยว่าจะเจ๊งหรือเปล่า แล้วก็ลองเข้า latex ดู
กุมภาพันธ์ 24, 2009
google appengine + inline svg + xhtml
ผมอยากใช้ inline svg เพราะว่าอยากแสดง gantt chart หน้าเดียวกับ form แต่ว่าพอเอา inline svg ไปใส่ใน html แล้วใช้ไม่ได้ (ก็น่าจะเป็นแบบนั้นอยู่แล้วมั้ง) ก็เลยเปลี่ยนมาใช้ xhtml แทน. แต่ว่าก็พึ่งเคยทำใน gae (google appengine) ก็เลยบันทึกไว้สักหน่อย เวลาใช้ xhtml ก็ต้องเปลี่ยน Content-Type ใน header ของ response หน่อย แบบนี้
...
class MainHandler(webapp.RequestHandler):
def get(self):
self.response.headers['Content-type'] = 'application/xhtml+xml'
...
แค่นี้ผมก็นึกว่าจะเนียนแล้ว แต่พอจะส่ง url ออกไป logout พบว่ามี & ติดอยู่โดยไม่ได้ escape และ Firefox ก็ไม่ยอมแสดงผล (ซึ่งก็น่าจะเป็นแบบนั้นอีกตามเคย) ผมก็เลยเขียนแก้ไปแบบ อาจจะสกปรกหน่อย เพราะนึกอะไรไม่ออก
...
class MainHandler(webapp.RequestHandler):
def get(self):
...
path = os.path.join(os.path.dirname(__file__), 'index.html');
val = {'logout_url': users.create_logout_url(self.request.uri).replace("&", "&"),
... }
self.response.out.write(template.render(path, val))
ก็คือ replace & ด้วย & ไปตรง แต่ก็ไม่รู้ว่าแบบนี้จะใช้ได้ทุกกรณีหรือเปล่า
<div id="result">
{{ svg }}
</div>
ใน template ผมก็เอา svg ไปใส่ได้เลย … ดูตัวอย่างได้จาก vtimeline revision 13
กุมภาพันธ์ 19, 2009
vtimeline: a gantt chart generator
คือผมจะทำ gantt chart ใส่ report เลยเขียนโปรแกรมขึ้นมาลองใช้ได้ที่ appspot และมี project page ด้วย.
