ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京 の発表資料です。 https://phpcon.connpass.com/event/224128/
テキストやSVGや画像が3Dで動く！HTMLで実装した要素から3Dアニメを自動生成するスクリプト -ztext.js
普通のHTMLで実装されたテキストやSVGや画像を立体的にするためにレイヤーを自動生成し、3DのアニメーションにするJavaScriptを紹介します。 日本語や絵文字にも対応しており、アニメーションはマウス操作などに反応させることもできます。 ztext.js ztext.js -GitHub ztext.jsの特徴 ztext.jsのデモ ztext.jsの使い方 ztext.jsの特徴 ztext.jsはHTML要素からレイヤーを自動生成することで、テキストやSVGや画像を3Dにできます。CanvasやWebGLは一切必要はありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。
【2020年版】ブラウザからベクター画像を作り放題の無料SVGエディタを厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザから即座に起動してすぐにでもベクター画像を描画できる無料のSVGエディタを厳選してご紹介します。 ほとんどのエディタがログイン不要ですぐに利用可能なうえ、オリジナルのアイコンやイラストをSVG形式で保存してWebコンテンツとして活用できます。 イラスト作成やSVGに興味のある方は、ぜひ参考にしてみてください！ ■ primalDraw シンプルなUIでありながら、ベクター画像を描くための基本的な描画ツールは一通り揃っているSVGエディタが「primalDraw」です。 面倒なユーザー登録などは不要で、ブラウザからアクセスすれば即座にエディタが起動してすぐに描画できる手軽さが特徴的です。また、2020年5月時点ではすべての機能を無料で提供しているのも魅力の1つでしょう。 ベジェ曲線などを利用した基本的なペンツールでゼロからイラスト
SVG形式のファビコンを設置しよう
2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと
Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう - Qiita
はじめに 質問箱や、ボタンメーカー、診断メーカー等を始めとする 「OGP画像生成系」 を ２個以上作ってそれのベストプラクティスがわかってきたので、共有したいと思います。 宣伝 この技術を使ったサービスを実稼働２日ぐらいで作りました！ 使い方は簡単です！ メッセージカードを書いて、Twitterにシェアするだけ。 #嵐ありがとう OGP画像生成系サービスとは？ 質問箱 みんなのボタンメーカー （｡･ρ･）ｵｼﾃﾐﾃ キズナアイな気分のときに押すボタンを作りました！みんな押してね！#キズナアイな気分のときに押すボタン#みんなのボタンメーカー https://t.co/2mzJUE48zj — Kizuna AI@hello,2019‼︎ (@aichan_nel) 2019年1月29日 「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】 すごくいいサービ
すごい簡単！UIデザイン用のさまざまなSVGアイコンをカスタマイズして利用できるJavaScriptライブラリ -vivid.js
WebサイトやスマホアプリにぴったりなSVGアイコンを簡単に使用できるよう構築されたJavaScriptの軽量ライブラリを紹介します。 カスタマイズも非常に簡単で、HTMLのdata属性を使用して、SVGアイコンのサイズやカラーを個別に設定できます。 90種類以上のSVGアイコンが全部商用利用無料 vivid.jsでは現在90種類以上のアイコンが利用できます。 手作業で追加するのも可能で、リクエストも受け付けています。 超軽量ライブラリ オリジナルのSVGアイコンのちょうど半分のサイズで実装された超軽量ライブラリ。他のCSSやJavaScriptなどの依存は無しです。 SVGアイコンは使用もカスタマイズも簡単 アイコンはHTMLで簡単に使用でき、サイズやカラーはdata属性でカスタマイズできます。 MITライセンス 個人でも商用でも無料で利用できます。
ビジネス系のイラストはおしゃれなのが無いと困っている人に！商用無料で使えるイラストのSVG素材 -unDraw
ビジネス系のサイトをはじめ、ランディングページ、ポートフォリオ、もちろん個人ブログにもぴったりなイラストのSVG素材が無料でダウンロードできるサイトを紹介します。 シンプルでセンスのあるイラストが揃っており、しかもクレジット表記不要の太っ腹ライセンスなので、使い勝手がよいと思います。 unDraw unDrawの特徴 イラストのSVG素材 素材のダウンロード unDrawの特徴 unDrawではランディングページ、スマホアプリ、プロダクトなどで利用できるイラストのSVG素材が無料でダウンロードできます。 イラストのフォーマットは、SVGと透過PNG イラストのテーマカラーは変更可能 MITライセンスで、使用時のクレジット表記は不要 テーマカラーの変更は、オンラインで簡単にできます。SVGだけでなく、PNGにも対応しています。
ChromeでSVGが表示されない現象 - Qiita
特定のSVGファイルがChrome（少なくともv51.0.2704.84 から、2017年12月26日現在の最新バージョンである v63.0.3239.108まで）で表示されない現象があるようです。 特定のSVGファイルとは、image要素のxlink：href 属性が xlink：href = "data：img/png; と記述されているものです。 IE, Edge, FireFox, Safariのそれぞれ最新版ではこの現象は確認できませんでした。 解決法 テキストエディタでSVGファイルを開き、xlink：href = "data：img/png; (画像赤罫線で囲った箇所) をxlink：href = "data：image/png;と書き換えてやると正しく表示されます。 Photoshop, Illustratorの現行バージョンで書き出しを行うと、Chromeで表示されないx
画像を解析してパスを生成、単色のSVGに変換してくれる・「Tracy」
Tracyは任意の画像を解析してパスを生成、単色のSVGに変換してダウンロードできるツールです。基本的には紙で書いたものを即SVGにする、というのが目的のようです。トレースするからTracy、って事なんですかね。色の選択は可能ですが単色（モノクローム）のみで、色も形も見た目をそのまま、というものではありません。精度は思ったよりよさげでしたが、細かな部分はまだ難しいみたいです。シンプルなロゴやシンボルなら問題なさそう。精度が向上すれば、例えばロゴを紙に書いて即SVGに、といった使い方が期待できますね。テストしてませんがスマホからでもできるみたいです。何か描いて写真撮ってそのままコンバート、みたいな流れが作れると捗りそうです。 Tracy
Snap.svgを使ってSVGでグラフを書く - Qiita
この記事の内容 SVGはXMLベースのベクター画像形式でW3Cが標準化しており各種ブラウザもサポートしている。Snap.svgはJSによるSVGのユーティリティライブラリでありSVGタグの自動生成などをしてくれる。SVGは汎用的な画像形式なのでほぼすべてのかたちを表現できる反面、XMLベースなので属性値で多くの見た目を制御している。それは色や線の太さだけでなく位置などの情報も属性値で制御する。Snap.svgでは位置情報は関数の引数にするが属性値の設定はjQueryライクな.attrとメソッドチェーンで行われる。また属性名も特殊なものが使われる場合が多いので注意が必要である。 この記事では数学関数をSVGを使ってグラフ化を通していくつかのSVGタグや属性そしてSnap.svgを使ってそれらをどう扱うかを解説する。 SVGの基礎知識 2種類のSVGタグ SVGタグには2種類ある。タグの子要素
便利で優秀なSVGツールとアイコンセットのまとめ「40 Excellent SVG Tools and Dozens of Icon Sets」
TOP > Tool > 便利で優秀なSVGツールとアイコンセットのまとめ「40 Excellent SVG Tools and Dozens of Icon Sets」 レスポンシブが盛んな昨今。PCとスマートフォン両方で使用することができ、かつ綺麗に表示させることが可能なSVGファイルは、非常に便利。今回ご紹介する「40 Excellent SVG Tools and Dozens of Icon Sets」ではSVGに焦点をあてた便利なツールがまとめられています。 Plain Pattern SVGファイルを編集してアニメーションを制作できるツールなどこれから必要になるコンテンツが多数収録されており、その中から気になったものをいくつかピックアップしていますので下記よりご覧下さい。 詳しくは以下 Snap.svg – Home SVGファイルを自由に編集することができ、簡単な操
ブラウザ上でSVGをJSXに変換するWebアプリを作った - wadackel.me
以前に CLI で SVG を React Components へ変換する方法 を記事に書きました。数が多いものなら一気に変換したいのですが、ちょっとしたデモサイトのロゴや、少量のアイコン追加など、CLI で変換する為の環境準備をするより気軽に使いたい場合は、ブラウザ上でさくっと変換出来た方が使い勝手が良さそうです。 という訳で、ちょっと前に作った React の Form ライブラリ のお試しを兼ねて、良い意味で雑に使える変換ツールを作ってみました。 作ったもの SVG to JSX with GUI https://wadackel.github.io/svg-to-jsx-with-gui/ よくある 2 ペインエディター風味です。 コードは以下のリポジトリに。 wadackel/svg-to-jsx-with-gui https://github.com/wadackel/svg
プログラマーのためのWEBサービスや開発系のアイコンセット「devicon」
Twitterなどの有名なアイコンは、自分がよく使用するものはストックとして持っているかもしれませんが、必要時にない場合は探すことになり、非常に手間を感じるのではないでしょうか。そんな手間を省いてくれる「devicon」を今回はご紹介します。 デベロッパーが持っておくと便利なアイコンが多数まとめられており、ソースコードも記載してくれている優秀なアイコンセットになります。 詳しくは以下 このアイコンセットの最大の特徴は、SVGバージョンのアイコンのソースも一緒に出てくること。自分に必要なアイコンをクリックすると左側にソースが2つ出現。そのうちの一つがSVGバージョンのもので、そのまま貼付けるだけで、アイコンを表示適応することができます。著名なよく利用するであろうアイコンの種類が豊富なことも嬉しいポイント。 サイズの拡大・縮小を行っても画像の崩れがでないとされるSVGはこれからも重宝される存在
SVGを扱えるJavaScriptライブラリまとめ
大画面モニタやRatinaディスプレイの普及により、拡大しても画像が劣化しないベクターグラフィックス（SVG）の利用が増えています。そんなSVGをJavaScriptで簡単に利用できるライブラリをまとめて紹介します。 Snap.svg Snap.svg Snap.svgはベクターグラフィックに特化し、アニメーション機能も備え、より高度にグラフィックスを操作できるライブラリです。Snap.svgは最新のブラウザ用に設計されていますのでマスキング、クリッピング、パターン、フルグラデーション、グループ機能など最新のSVGの機能をサポートしています。Snap.svgを導入することで、より自在にSVGを扱えるようになるのではないでしょうか。 Snap.svg jQueryライクな操作 svg.js svg.js svg.jsはjQueryライクに操作できるSVGライブラリです。圧縮時は約53kb程度
IllustratorからhtmlにSVGアイコンを表示するまでの流れ - Qiita
イラストレーターでアイコンを作成し、svgタグで出力するための流れを書いてみました。 今回のサンプルでは点数を5つ星で表示するようなものを作ります。 記事は長いですが、解説が多いだけです（頑張って画像も付けました）。実際に私が書くと5分もかからず終わるレベルです。 svg周りはブラウザによって挙動が異なるので注意しながら制作してください。（今回ハマりました） Illustratorが無い方は（Illustratorは以上）まで飛んでください。 新規ドキュメント サイズなどは後で調整するので適当で構いません。 Webで使用するのでカラーモードはRGBにしてください。（色はCSSで調整するのでIllustrator上はCMYKでも大丈夫だったりします） 隠れている設定があるので「詳細設定」をクリックします。 更に「詳細」をクリックすると新たに隠れているものが出てきます。環境によっては元から開い
なかなか気付かれにくいけれど、見つけたら「おおっ！」となるSVGアニメーションのテクニック
ヘッダに配置されたハンバーガーメニュー。 まぁ、ハンバーガーメニューでなくてもいいのですが、スクロールするとヘッダから流体のようにちゅるんと分離するアニメーションを紹介します。 実装しても気付かれにくいですが、見つけたら嬉しくなりますよね。
Shape Shifter - 異なるSVGに変化するアニメーションを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGとこれまでの画像バイナリと決定的に違う部分はなんと言ってもプログラムから操作しやすいということでしょう。アニメーションの定義などはSVG内でもできますが、より詳細なアニメーションはJavaScriptで制御できます。 そんなSVGを使って形状変化するアニメーションを定義できるのがShape Shifterです。 Shape Shifterの使い方 2つのボックスに対してSVGファイルを適用します。あまり複雑でないものがいいようです。 そしてプレビューを押すとアニメーションされます。 一例。マイナスがプラスに変わるアニメーション。 さらに変化点を変えることでアニメーションを若干変化させられます。 ハンバーガーメニューが矢印に変わるアニメーション。 Shape Shifterを使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
パーティクル編集ツール Particle Develop - ICS
複雑な形で進捗表示できる「jQuery-svg-progress」:phpspot開発日誌
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
