新しい日記

新しい日記

svg

SVGダイエット

svg

ポートフォリオのキービジュアルをsvg化したのはいいものの、ファイルサイズが大きく回線が遅いと読み込みに時間がかかるのが気にかかっていた。同じ画像をpngで書き出すと185KBだったのに対し、Illustratorからただ書き出しただけのsvgはなんと584KBと3倍以…

今日のsvgその2

svg

今度はsvg+cssを使ったアニメを練習してみた。sampleたのしい。 コードは以下svg <svg> <path id="path" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> <text id="text" font-size="8" dx="0" dy="0"> <textPath xlink:href="#path"> testtesttesttest </textPath> </text> </svg> css #path { stroke:#808080; fill:none; stroke-width:1; …

今日のsvg

svg

<path id="textTest" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> このパスの上にテキストを描画しましたコードこんなかんじ <path id="textTest" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> <text font-size="8" dx="0" dy="0"> <textPath xlink:href="#textTest"> testtesttesttest </textPath> </text> strokeもnoneに…</path></path>

SVGは最高

svg

引き延ばしても大丈夫、アルファチャンネルを保持する、アニメーションも可能、いいとこだらけなSVG 基本は以下で学ぶ &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html" data-mce-href="…