DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
透過PNGをSVG+JPGに変換するスクリプト
witten by DEFGHI1977@xboxlive 変換前(透過PNG画像) ファイル: サイズ:Byte 変換後(SVG+JPG画像) JPG品質:% サイズ:Byte(%) これは何？ 本スクリプトは，透過PNG画像を同等のSVG画像に変換するものです．元画像をより軽快なJPG画像としつつ，透過部を定義できることことから昨今注目を集めているテクニックです．本スクリプトでは元画像をトリミングしている他，マスク画像を8階調(3bit)のPNG画像としているので，透過部の形状を維持しつつファイルサイズを大幅に縮小することに成功しています． ※似たスクリプトとしてはZorroSVGがありますが，こちらではfilter要素を使っていて見た目上は，似たようなものです．が，マスク画像がJPG形式なので，品質を落とすにつれ境界部のノイズが目立ちやすくなります．この点を改良したものがこのスクリプ
Snap.svgの使い方まとめ
Snap.svgの使い方 まとめ How to useすなっぷ.svg タイトル svg要素の基本的な使い方まとめ・別館 written by DEFGHI1977@xboxlive 本記事ではsvg世代のjavascriptライブラリとして有望なSnap.svgの使い方について実際に動作しているサンプルを交えて解説しています（これは動作サンプルであると同時にテストコードと言えるものですね）．なお間違いがあったり，バージョンアップに伴う不整合が発生するかも知れませんので，その点ご容赦下さいね．やっぱり手でゴリゴリ書いてます． なお，Snap.svgを用いたSVG(もしくはjavascriptの)入門記事ではありません．Snap.svgを上手く活用したいのであれば，背後で動いているsvgについてよく知っている必要があります．そのため，ある程度SVGやプログラミングの知識があることを前提に話を
ドット絵svg化スクリプトver2
お手持ちの画像（jpg,png,gif等）をsvg形式に変換します．本プログラムで作ったsvg画像は元画像のピクセル情報を維持するように設定されているので，拡大してもドットがぼやける心配がありません． その為，ドット絵に適したスクリプトとなっているのですが，一般の画像においてもサイズがそこそこ（600px平方位）なら減色処理を行うことで割とまともに動作するsvg画像となります． 前回公開したものは，1ピクセル毎に1要素を設定していたため，出来上がったsvg画像が重すぎると言った問題がありましたので，今回は色毎にpath要素に集約して見ました．従って，このバージョンでは色数が少ないほうが上手く行きます． 動作はfirefox，chrome，operaで行なっています．webworkerが動作する環境でお試しください． chromeではsvgの動作が芳しくないため，処理結果そのものに問題は
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
svgフォント編集スクリプト
ヒント お手持ちのsvg画像からフォントとかパスを抽出してsvgフォント化することができます． フォント情報が見つからなかった場合，パスを抽出します．一つのパスを文字として解釈します． ファイル読み込み時にパスのリサイズや位置の調整を行うことができます．いろいろ試してみましょう． 文字をクリックすると内容を編集することができます．位置の微調整等を行う際にご利用下さい． 余りに複雑なsvgファイルを読み込んだ場合，スクリプトが応答しなくなる場合があります．（このような図形はそもそもフォントとして不適でしょう．） 本スクリプトで生成したsvgフォントファイルは全ての環境で正しく動作するとは限りません．webkit系/operaのブラウザで試すか，下のサービスを使って他の形式に変換して使いましょう． ここで生成したsvgフォントファイルはicomoonでeot,ttf,woff形式に変換できます
svg要素の基本的な使い方まとめ
この文書ではsvgをhtml埋め込みデータとして扱う際の覚書として作成した．svgの要素と属性は実際の例を踏まえて説明したつもり． 注意事項 仕様はここを参照のこと． 本文書では実際の挙動を調べつつ自分なりの解釈が入っているため，多々間違いが入ってしまうかもしれないが，気にしない． スクリプトを使ってsvg要素の中身(ソース)を出力しているため，一部実際のコードと表示されるコードとの間に差異があるが，予めご了承いただきたい． 目標は見栄えのする図形をsvgの手入力でサラっと記述できるようになることなので，複雑な図形は素直にinkscape等専用のツールを使うと良い．ただ，ここで示したことはツールを使う上でも役に立つと思う．特にアニメーションなど． svg:ベクター画像のカンバスの定義，title:タイトル，desc:説明 html文書においてsvg画像を挿入したい場合,embed要素を用い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スタイル設定 - svg要素の基本的な使い方まとめ
svg要素の基本的な使い方まとめ - 11.画像効果