- ลืมใช้ 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>
ถ้าเป็นตัวอย่างข้างบน วงกลม กับ สี่เหลี่ยม มันซ้อนกัน แต่ว่า วงกลม มาทีหลังจึงอยู่บน
ย้ายตำแหน่งของ 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
ก็เป็นอันใช้ได้ 
เขียน 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 ดู
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
vtimeline: a gantt chart generator
คือผมจะทำ gantt chart ใส่ report เลยเขียนโปรแกรมขึ้นมาลองใช้ได้ที่ appspot และมี project page ด้วย.
