<?php function svgstart(){ header('Content-type: image/svg+xml'); print <<<EOD1 <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 841.9 595.3" style="enable-background:new 0 0 841.9 595.3;" xml:space="preserve"> <style type="text/css"> .mfont{font-size:18pt;} .wfont{font-size:8pt;text-anchor:middle;} .dfont{font-size:11pt;text-anchor:middle;fill:white;} .dfont2{font-size:8pt;text-anchor:middle;fill:white;} .c01{fill:#F8C17C;} .c02{fill:#F29A5A;} .c03{fill:#ED7235;} </style> EOD1; } function svgend() { print "</svg>\n"; } // Main Program svgstart(); print "<text y=\"30\">筑波学院大学</text>"; svgend();
コンテントタイプ
header()関数でhttpのヘッダに下のMIMEタイプを書き込みます
Content-type: image/svg+xml
この出力はimgタグで画像として表示できます。保存してイラストレータに読み込むこともできます。word2016から図形として文書に貼り付けることもできるようになりました。
キャンバス
画面はA4サイズ横置き(0 0 841.9 595.3)にしています。単位はポイント(pt)です。
左上が基点(0,0)になっています。
1pt=1/72インチ=0.3527mm(1インチ=25.4mm)
style
fill 塗りつぶしの色、hsl(色相、彩度、輝度)
stroke 輪郭の色
彩度 | ||||||
100% | 75% | 50% | 25% | 0% | ||
輝度 | 100% | |||||
75% | ||||||
50% | ||||||
25% | ||||||
0% |
テキスト
文字は文字の下(ベースライン)が基準になっているのでy="30"で少し下げてみました。