アウトライン化する
図形・画像をSvgで表現すると画像サイズが小さくなるうえ、拡大・縮小しても画像が劣化しないという特長があります。加えて手書きでサインするかのように時間差表示が可能になり、動画表現として閲覧者にアピールできます。
画像を縁どって違和感なく表現するには複雑な図形や写真などは似合いません。単純なものを選びます。文字を縁取りしたり、左馬のようにフォントが無いものは扱い易いです。文字は白と黒の2色であり、多色画像はこれらをマスターした後の挑戦が望ましいでしょう。
SVG画像に変換する
PNG画像からSVG画像を作成するには、フリーソフトInkscapeを使います。Inkscapeを起動し、ファイル-インポートと指定して画像ファイルを読み込む-上の図のように長方形の窓枠に移動-無駄なクリックで選択がはずれたら選択ツールで再び選択する-パス-ビットマップのトレース-画面の右下ライブレビューに✔を入れる-プレビュー欄に画像が表示されるように明るさの境界のしきい値を変更する-OK-ファイル-名前を付けて保存-終了
保存したSVGファイルをテキストエディタで開き、<image xlink:href=”data:image/png;base64, ～ /> の直後にPathデータが生成されていることを確認します。生成されない場合はPNG画像が選択されているかを調べます。
次のステップで一筆書きのようなHTMLプログラミングコードを作成しますが、imageデータは不要です。削除しておくとSVGファイルサイズが激減します。
手書き風アニメーションにする
手書き風アニメーションにするにはLazyLinePainterを用います。LAZY LINE COMPOSERは指定したSVGファイルを手書き風アニメーションのHTMLコードに変換してくれます。上のリンクアドレスをクリックして「Click or Drop your SVG file here」に先に求めたSVGファイルをドロップします。
Animation optionsでdurationを5000（5秒）に設定してDownload Zipをクリックすると15秒ほどでlazy-line-painter.zipがダウンロードされます。Zipファイルを解凍するとindex.htmlとlazy-line-painter-1.9.6.min.jsが現れます。
この形式はすべてに共通です。サイトに公開するにはJSライブラリーをアップロードしindex.htmlの<!– Include lazylinepainter –>の次の行にライブラリーアップロードアドレスを設定します。
index.htmlというファイル名も常に同一なのでrenameして管理します。
「愛」を込めたサンプル
サンプルは記事のロード完了で動き出しています。再度、手書き風アニメーションするには再ロードボタンをクリックします。
サンプルプログラミングコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Like_A_Sign</title>
<meta name="description" content="A modern JS library for SVG path animation">
<style> <!-- css -->
body, html {
position: absolute;
width:100%; height:100%;
top:0; left:0; margin:0; display:flex;
align-items:center;
justify-content:center;
}
#Ai550X600A {
width: 70vw;
height: 70vh;
position: relative;
overflow: visible;
}
</style>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2019/03/lazy-line-painter-1.9.6.min.js"></script> <!-- Include lazylinepainter -->
<script type="text/javascript">
(function(){
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
let el = document.querySelector('#Ai550X600A');
let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":1.5,"strokeOpacity":1,"strokeColor":"blueviolet","strokeCap":"square"});
myAnimation.paint();
setTimeout(function(){ //アニメーション終了時
document.getElementById("path847").style.fillOpacity = "1";
document.getElementById("credit").style.opacity = "1";
},10000); //ディレー
}
}
})();
</script>
</head>
<body>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="210mm" height="297mm" viewBox="0 0 210 297" version="1.1" id="Ai550X600A" inkscape:version="0.92.4 (5da689c313, 2019-01-14)" sodipodi:docname="Ai550X600A.svg" data-llp-composed="true" class="lazy-line-painter">
<defs id="defs828"/>
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="-510" inkscape:cy="560" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false"/>
<metadata id="metadata831">
<rdf:rdf>
<cc:work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:work>
</rdf:rdf>
</metadata>
<g inkscape:label="レイヤー 1" inkscape:groupmode="layer" id="layer1" transform="translate(-100, -97)">
<path style="fill:tomato" d="m 151.58382,215.5911 c -0.64016,-0.17199 -2.34213,-0.9327 -3.78216,-1.69047 -5.34373,-2.81194 -8.31907,-4.84474 -21.92653,-14.9806 -3.83677,-2.85791 -6.98878,-5.17625 -7.00447,-5.15187 -0.30157,0.46866 -9.33539,10.47468 -11.09951,12.29403 -2.72916,2.8146 -4.31624,4.03962 -6.60142,5.09544 -2.566503,1.18579 -4.454883,1.45926 -9.153828,1.32562 -4.063671,-0.11557 -5.955814,-0.41689 -7.054413,-1.1234 -0.809528,-0.52061 -0.553468,-0.81805 1.058333,-1.22937 2.940596,-0.75041 5.783565,-2.04926 8.420191,-3.84687 3.55931,-2.42668 13.600197,-11.40358 17.110007,-15.29694 l 1.48591,-1.64828 -3.10993,-2.29317 c -1.71046,-1.26124 -3.21292,-2.30244 -3.3388,-2.31378 -0.12588,-0.0113 -2.26901,1.89627 -4.7625,4.23912 -12.653652,11.88917 -22.006774,19.35387 -26.143147,20.86477 -1.731694,0.63254 -5.275929,0.76005 -8.038205,0.28921 -3.582184,-0.61061 -8.291692,-2.38336 -10.489841,-3.94858 l -0.660413,-0.47025 2.513156,-0.69167 c 4.348066,-1.19667 8.462685,-2.77397 14.54588,-5.57602 4.471751,-2.05979 12.420829,-7.33627 20.335613,-13.49849 2.266924,-1.76496 6.684157,-5.51799 6.684157,-5.67909 0,-0.16399 -5.18122,-3.551 -5.876437,-3.84148 -0.433669,-0.1812 -1.635682,-0.38991 -2.671136,-0.46379 l -1.882646,-0.13434 1.436575,-1.68918 1.436578,-1.68919 -1.93174,-0.25875 c -2.936064,-0.39329 -3.849133,-1.00913 -3.84154,-2.59102 0.0078,-1.62098 0.617154,-2.55006 3.884026,-5.92183 3.191713,-3.29419 3.51577,-3.80445 3.518477,-5.54021 8.47e-4,-0.54085 -0.154673,-0.90331 -0.544912,-1.27 -0.470408,-0.44203 -0.785766,-0.52194 -2.275417,-0.57656 -1.343372,-0.0493 -1.893303,0.0216 -2.464066,0.3175 -0.40411,0.2095 -1.676938,1.47629 -2.828508,2.81508 -4.585765,5.33131 -8.572504,9.66309 -9.448129,10.26583 -1.195396,0.82285 -2.47379,0.80292 -4.319875,-0.0674 -2.541459,-1.19808 -3.002312,-2.26634 -1.802175,-4.17746 0.955128,-1.52096 5.116312,-5.54837 8.668426,-8.38976 4.49752,-3.59763 6.664921,-6.05483 9.432922,-10.6942 1.249892,-2.0949 1.357181,-2.37005 1.302901,-3.34123 -0.05781,-1.0344 -0.08707,-1.0769 -1.29374,-1.87955 -1.23411,-0.8209 -1.279349,-0.91651 -0.885694,-1.87168 0.140159,-0.34009 -0.131803,-0.35651 -4.050567,-0.24459 l -4.200817,0.11998 -0.423333,0.5479 c -0.232834,0.30135 -0.996707,1.26866 -1.697495,2.14959 l -1.274161,1.60168 -3.276672,0.35096 c -1.80217,0.19302 -3.679563,0.35971 -4.171985,0.37041 l -0.895314,0.0195 0.970795,-1.5007 c 2.313072,-3.57565 3.268217,-6.59233 3.279257,-10.35706 0.0039,-1.34122 -0.05809,-2.69853 -0.137833,-3.01625 -0.09276,-0.36958 -0.06024,-0.57767 0.09027,-0.57767 0.35653,0 7.636614,-0.82554 8.528042,-0.96705 0.709179,-0.11259 0.810104,-0.0654 1.112935,0.5202 0.183168,0.35421 0.445378,1.36664 0.582687,2.24985 l 0.249654,1.60583 3.611577,-0.12714 c 5.267261,-0.18542 4.902488,-0.0669 5.065858,-1.64542 0.223491,-2.15934 0.419318,-9.98923 0.265191,-10.60331 -0.175247,-0.69824 -1.403094,-2.08664 -2.378426,-2.68943 l -0.723879,-0.44738 -3.910393,0.54859 c -2.150717,0.30173 -4.03033,0.54542 -4.176918,0.54154 -0.146587,-0.004 0.685978,-0.32477 1.850145,-0.71308 6.965968,-2.32352 19.489332,-7.49216 26.516352,-10.94383 3.80319,-1.86813 4.44715,-2.26067 5.66096,-3.45082 2.07836,-2.03784 3.24459,-5.045964 3.26947,-8.433133 l 0.007,-1.005417 h 2.13903 c 4.30227,0 8.07113,1.735291 8.98904,4.138816 0.64228,1.681778 -0.0175,4.140424 -1.74137,6.488744 -0.88249,1.2022 -3.57925,3.62506 -6.15754,5.53215 l -1.74501,1.29073 2.40175,0.77822 c 1.32096,0.42803 2.69011,0.92734 3.04255,1.1096 1.07443,0.55561 1.9617,1.41623 1.95897,1.90014 -0.007,1.20362 -2.5586,5.98856 -5.86385,10.99544 -1.60044,2.42438 -3.10223,5.21439 -2.91237,5.41056 0.0392,0.0404 3.75651,-0.0478 8.26077,-0.19616 l 8.18957,-0.26973 0.62587,-0.86217 c 0.90348,-1.24459 2.40132,-4.05001 3.72173,-6.97068 1.08602,-2.40222 1.14304,-2.61356 1.06023,-3.93012 -0.0532,-0.84535 -0.30802,-1.92727 -0.6494,-2.75694 -0.30904,-0.75107 -0.53431,-1.39315 -0.50061,-1.42685 0.0337,-0.0337 1.86394,-0.0859 4.0672,-0.11609 3.79488,-0.0519 4.0617,-0.0292 5.06427,0.43226 1.23733,0.56948 2.34822,1.5758 2.52733,2.28944 0.2525,1.00606 -1.69116,3.95271 -5.35893,8.12431 -1.76355,2.00581 -3.62468,4.49122 -3.62395,4.83953 1.6e-4,0.074 4.69122,0.13526 10.42459,0.13602 5.73336,8.5e-4 10.78868,0.0779 11.23403,0.17134 1.09462,0.22975 1.61526,1.33418 1.61484,3.42561 -2.1e-4,1.2144 -0.1044,1.67157 -0.57744,2.53451 -0.56668,1.03377 -0.90489,1.34886 -5.96847,5.5606 -1.86029,1.54734 -3.81617,3.89442 -3.81617,4.57947 0,0.18829 0.47456,0.26848 1.64042,0.27719 2.85322,0.0213 6.74442,1.61174 7.80503,3.19011 1.63051,2.42648 0.0506,6.94242 -3.14193,8.98085 -0.60349,0.38533 -2.65955,1.72454 -4.56902,2.97602 -1.90948,1.25148 -3.56173,2.27541 -3.67169,2.27541 -0.10995,0 0.42449,0.73819 1.18765,1.64042 1.83646,2.17113 2.3657,3.23889 2.01956,4.07454 -0.26667,0.64381 -1.62008,1.63071 -3.06322,2.23369 -0.73639,0.30768 -1.91758,0.34565 -9.95626,0.31998 l -9.12075,-0.0291 0.0887,1.39278 c 0.14152,2.22259 -1.0175,4.57813 -3.69656,7.51272 -0.69082,0.75671 -2.22986,2.49011 -3.42009,3.852 l -2.16406,2.47617 5.7707,3.86366 c 3.17389,2.12502 6.86608,4.51538 8.20487,5.31191 5.89145,3.50522 21.31015,10.77046 29.58073,13.93835 0.72778,0.27876 1.29277,0.60252 1.25554,0.71946 -0.2313,0.72643 -4.24405,2.49507 -7.69557,3.39185 -4.4042,1.14431 -7.60157,1.41149 -9.80545,0.81937 z M 119.9624,181.80042 c 1.89335,-1.94469 3.14006,-3.44866 4.50548,-5.43519 1.27671,-1.85746 1.36553,-2.51463 0.46197,-3.41818 l -0.61872,-0.61872 -3.66753,0.002 -3.66753,0.002 -2.54,3.09106 c -1.397,1.70008 -2.54,3.18902 -2.54,3.30876 0,0.23676 6.00036,4.57116 6.3553,4.59079 0.11933,0.007 0.88929,-0.67856 1.71103,-1.52258 z m -12.4055,-8.30792 1.14971,-1.16417 h -2.47985 c -1.8493,0 -2.47674,0.0673 -2.46762,0.26459 0.0134,0.29015 2.07717,2.03366 2.42916,2.05221 0.1204,0.006 0.73627,-0.51234 1.3686,-1.15263 z m 1.65446,-7.65475 5.57029,-0.13972 0.95083,-1.23569 0.95083,-1.23567 -1.01778,-0.001 c -1.74524,-0.003 -4.87074,-0.56529 -5.89575,-1.06149 -1.74278,-0.84368 -3.69454,-3.90054 -3.69454,-5.78642 0,-3.70547 4.73804,-6.60771 9.56479,-5.85881 0.8368,0.12983 2.81324,0.66013 4.39208,1.17844 2.68676,0.88201 2.8887,0.91878 3.15275,0.57399 1.28126,-1.67301 4.90371,-10.54204 4.90371,-12.00599 0,-0.29654 -0.3614,-0.81245 -0.94777,-1.35294 -0.88233,-0.81331 -1.03213,-0.87364 -2.16958,-0.87376 -1.2536,-1.3e-4 -26.074771,0.59467 -28.738482,0.68868 l -1.481666,0.0523 0.986864,0.48615 c 1.476493,0.72735 2.880713,2.05534 3.16039,2.98881 0.205958,0.68743 0.176782,0.94319 -0.206434,1.80952 -0.528999,1.19588 -1.803334,3.01555 -4.199663,5.99685 -0.963596,1.19882 -1.751991,2.25792 -1.751991,2.35355 0,0.24544 1.331229,0.43583 3.069167,0.43895 1.760914,0.003 2.738778,0.41933 3.435365,1.46205 0.85088,1.27369 0.682525,2.18741 -1.001199,5.43387 -1.698332,3.27463 -1.843322,4.0738 -0.93495,5.15334 0.300696,0.35735 0.848383,0.73707 1.217083,0.84381 0.84535,0.24474 3.630626,0.26864 10.685656,0.0917 z m 32.41154,-0.30406 c 0.42769,-0.12814 1.00005,-0.40076 1.27191,-0.60583 1.14327,-0.86236 0.0396,-1.84871 -4.85167,-4.33587 l -2.69552,-1.37065 -2.94161,1.07273 c -1.61788,0.59 -3.99852,1.37213 -5.29029,1.73808 l -2.34869,0.66535 -0.93215,1.25151 c -0.51268,0.68833 -1.00831,1.3789 -1.10141,1.53459 -0.14026,0.23455 1.39719,0.28307 8.97127,0.28307 6.03905,0 9.4044,-0.0791 9.91816,-0.23298 z m 11.9214,-3.86639 c 2.05763,-2.7276 2.40081,-3.52845 2.05782,-4.8022 -0.55663,-2.06715 -2.53801,-2.9704 -5.51706,-2.51506 -2.07529,0.31721 -11.20739,3.2365 -11.19868,3.57992 0.001,0.061 1.97799,0.91422 4.39209,1.89609 4.45922,1.81367 6.63247,2.81972 7.77593,3.59969 0.34925,0.23823 0.68263,0.43014 0.74084,0.42648 0.0582,-0.004 0.84528,-0.98687 1.74906,-2.18492 z m -33.60683,-3.95885 c 0.66379,-1.17235 1.1739,-2.16248 1.13358,-2.20028 -0.0403,-0.0378 -0.86111,-0.28021 -1.82397,-0.53867 -1.24841,-0.33511 -2.14413,-0.44487 -3.12216,-0.38259 -1.25674,0.08 -1.44235,0.15651 -2.21809,0.914 -1.04801,1.02335 -1.12728,1.85636 -0.27327,2.8713 0.82853,0.98465 2.02155,1.45763 3.6906,1.46314 l 1.40642,0.005 1.20689,-2.13155 z m 9.20943,1.01004 1.16417,-0.43254 -0.6961,-0.28526 c -1.26514,-0.51843 -1.50955,-0.45548 -2.10555,0.54234 l -0.55282,0.92554 0.51307,-0.15877 c 0.28219,-0.0873 1.03694,-0.35342 1.67723,-0.59131 z m 8.55036,-3.82826 c 1.75843,-0.97612 5.26433,-2.96273 7.7909,-4.41469 2.52656,-1.45196 5.02081,-2.7595 5.54276,-2.90563 0.82038,-0.22969 0.99732,-0.38442 1.3055,-1.14156 0.79232,-1.94664 1.55067,-4.41416 1.68144,-5.47111 0.19624,-1.58614 -0.10212,-2.20985 -1.32218,-2.76398 -0.91865,-0.41723 -1.43921,-0.46432 -5.97791,-0.54071 -2.7344,-0.046 -6.32186,-0.0162 -7.97212,0.0663 l -3.00049,0.15 0.9342,0.89512 c 0.51382,0.49232 0.93421,1.05331 0.93421,1.24664 0,0.75795 -0.86906,2.55922 -2.68766,5.57064 -2.31142,3.82747 -5.43962,9.38417 -5.32986,9.46755 0.26288,0.19968 4.17125,1.5901 4.50288,1.60191 0.22065,0.008 1.8399,-0.78436 3.59833,-1.76048 z m -31.09286,-23.69738 6.35,-0.24535 0.46799,-1.39972 c 0.87909,-2.62928 1.74979,-8.74742 1.75278,-12.31621 0.002,-2.29965 -0.16821,-2.80532 -1.31435,-3.90643 l -0.7172,-0.68903 -7.21817,1.21162 -7.218182,1.21163 0.519101,0.61692 c 0.986721,1.17264 1.411171,2.28438 1.511211,3.95812 0.0834,1.39529 0.0285,1.73174 -0.43184,2.64583 -0.738278,1.46607 -2.466545,5.82899 -3.035065,7.66185 l -0.475996,1.53459 1.729863,-0.0192 c 0.951425,-0.0106 4.587358,-0.12964 8.079858,-0.26459 z" id="path847" inkscape:connector-curvature="0" data-llp-id="Ai550X600A-0" data-llp-duration="15000" data-llp-delay="0" fill-opacity="0.2"/>
<text id="credit" style="opacity:0" x="70" y="222" font-size="6" font-family="bold" fill="black">©2020 TacM, Ver0.01</text>
</g>
</svg>
</body>
</html>
最後に
前回は「い」の文字のパスデータを作りました。次には左馬をアウトライン化して描画する予定でしたが、それを飛び越えて「直江兼続」が装着した兜をイメージした「愛」の文字を手書き風にアニメーションにしました。
プログラミングコードを公開しますので五月端午の節句に向けて関係者の固有名を入れてプレゼントしてはいかがでしょう。
おまけ
サンプルコードはLASY LINE COMPOSERが出力したコードを少し変更しています。時代遅れなインターネットエクスプローラーのサポートコードや冗長と思われる部分を削除しています。
アニメーションが終了した時に縁取り文字を目立たせ完了を告知し、クレジットを入れる処理を追加しています。32～35行部分を注視してください。
LAZY LINE COMPOSERはフリーソフトながら画像をアウトライン化してくれる優れたツールです。HTMLプログラミングを習得して会社の創業記念や大切な人への誕生祝いの作品制作に挑戦してください。
