タグ

SVGに関するraimon49のブックマーク (48)

  • マイクロソフトが絵文字データ1538種をオープンソース提供。改変・商用利用も自由 | テクノエッジ TechnoEdge

    マイクロソフトが独自デザインの絵文字『Fluent emoji』1538種のデータをオープンソースで公開しました。 Microsoft 365のリアクション等でも使われるマイクロソフト版の最新デザイン絵文字 Fluent emoji 1538種について、3D表現のPNGファイルやベクタのSVG版、フラット版やハイコントラスト版など一式を含み、GithubFigma で誰でも自由に利用したり入手できます。 制限の少ないMITライセンスのため、自由に改変や配布、商用利用も可能(著作権表示と許諾表示は必要。MITライセンスを参照)。 現在の絵文字に欠けた新しい絵文字の素材にすることも、顔や動物やべ物のアレンジ版を作ることも、自分のアプリや作品に導入することもできます。 Fluent Emoji は、マイクロソフトが2021年に全面刷新したスタイルの絵文字。モバイル機器やチャットアプリ、リ

    マイクロソフトが絵文字データ1538種をオープンソース提供。改変・商用利用も自由 | テクノエッジ TechnoEdge
    raimon49
    raimon49 2022/08/18
    自社デザインした絵文字が普及することの重要性を認識したのではないか。日本では「ぴえん」なんて、完全にApple版の絵文字が想起されてるし。
  • SVG形式のファビコンを設置しよう

    2022年4月27日 SVG, Webサイト制作 つ・い・に!ファビコンもSVG形式が対応されるようになりました!SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません!やったね!少し工夫すればダークモードにも対応できますよ!さっそくみていきましょう! ↑私が10年以上利用している会計ソフト! SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと

    SVG形式のファビコンを設置しよう
  • <btn open />

    <btn open />
  • Hey! Say! JUMPがグループ名の「a」のためにフォントまで用意しているという話 - in between days

    NHK紅白歌合戦2018の出場歌手が発表になり、 出場歌手|第69回NHK紅白歌合戦 この一覧でジャニーズの「Hey! Say! JUMP」の名前だけが画像だということが話題になった。 第69回NHK紅白歌合戦の出場歌手のページhttps://t.co/Z6lbjpIbMY "Hey! Say! JUMP" の文字がどうも選択できない。 HTML ソースを見た時、NHK の 「"Hey! Say! JUMP" を絶対にテキスト選択させまい!」 とする意地を感じた。 何で? pic.twitter.com/dil9k9LVCA— nipotan (@nipotan) 2018年11月14日 しかも、ただの画像ではなくてこういうSVGが指定されている。 Web技術が使われててすごい。 なんでこういうことをやっているかというと、どうも a の字形にこだわっているためではないかという。 公式的に

    Hey! Say! JUMPがグループ名の「a」のためにフォントまで用意しているという話 - in between days
    raimon49
    raimon49 2018/11/16
    >結論としてジャニーズは、Hey! Say! JUMPの「a」のために自前でフォントを用意していることがわかった。
  • Pixelaを支える技術 - えいのうにっき

    Pixelaの技術的な話(といっても高度なことは殆どしてないんだけど......)とか、あと今回の個人的な頑張りポイントである利用規約・GDPR対応といったところは、後日別エントリとしてまとめたいな〜と思っています。そのうち書くので、よろしかったらそちらも楽しみにしてやってくださいっ。 commit以外の数値でも草を生やせる、PixelaというAPIサービスを作った! - えいのうにっき blog.a-know.me などと書いておきつつ、3週間ほど経ってしまった。ということで、今回はこの点に関して書く。あと、過大なタイトルについてはすみません。これ以外もう何も思いつかなかった。 思い当たる限りで、ざっと箇条書きにしていく。この記事に限らないことだけど、なにか間違ってることとか、もっといいやり方あるよ、というところがあれば、ぜひ教えて欲しい! サーバーサイド GCPGoogle Clou

    Pixelaを支える技術 - えいのうにっき
    raimon49
    raimon49 2018/11/05
    CTOにメンタリングしてもらえる環境とても良い。うらやましい。
  • グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing

    これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい!!という一心でやっています。 これらはほとんどSVGVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i

    グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
    raimon49
    raimon49 2017/12/05
    DOMバインディングできるのはCanvasに無い強みだよなぁ。
  • Markdeep

    Markdeep is ideal for design documents, specifications, README files, code documentation, lab reports, blogs, and technical web pages. Because the source is plain text, Markdeep works well with software development toolchains. Markdeep was created by Morgan McGuire (Casual Effects) with inspiration from John Gruber's Markdown and Donald Knuth's and Leslie Lamport's LaTeX. Style Features (See the d

  • グーグルの旧ロゴは14,000バイトもあったのに、新ロゴはたった305バイトなのはどうして?

    グーグルの旧ロゴは14,000バイトもあったのに、新ロゴはたった305バイトなのはどうして?2015.09.07 17:3021,429 SHIORI そんなに違うの? グーグルの新ロゴが発表され、旧ロゴのファイルの大きさは14,000バイトだったのに対し、新ロゴはたった305バイトになったそうです。どうしてそこまで変わるのか? UIデザイナーのIlya YakubovichさんがQ&AサイトQuoraでわかりやすく解説してくれています。 グーグルの古いロゴにはローマン体のフォントが採用されていて、セリフと呼ばれる飾り(線の端にちょこんと付いてるやつ)あるため、ベジエ曲線を使わないと作れないデザインでした。その結果、ロゴ全体でのアンカーポイントは100箇所。ファイルの大きさは6KB(6,380バイト)になり、圧縮しても2KB(2,145バイト)といったところです。 一方シンプルになった新し

    グーグルの旧ロゴは14,000バイトもあったのに、新ロゴはたった305バイトなのはどうして?
    raimon49
    raimon49 2015/09/08
    モバイル最適化を謳ってるだけあるってことか。
  • SVGアニメーションの現状 | POSTD

    SVGScalabe Vector Graphics)の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の(そして未来の)SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL(Syn

    SVGアニメーションの現状 | POSTD
  • 安藤日記 [&] WebGL Performance Tuning

    安藤日記 安藤日記:デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ ( via. Behind the magic of AKQA Winterlands ) #WebGL Performance Tuning WebGLコンテンツ/プログラムの速度をコツコツと速くするための、 パフォーマンスチューニング観点をまとめました。 まずはプロファイリングが重要。 闇雲にチューニングしても、あまり速くならない場合もあります。 また、最初の設計や、ハードウェア性能を知った上でのデータ量の見積もりも重要です。 ■WebGLプロファイリングのコツ ●グラフィックスパ

    raimon49
    raimon49 2015/03/21
    各種ツールの紹介も。しかしモバイル環境以上に環境が多様だからテクスチャフォーマット1つ選ぶのも大変そう……。
  • SVG Viewing & Diffing

    ProductSVG Viewing & DiffingIn the spirit of making diffs of rich information easier to parse, SVG images are now viewable and diffable on GitHub! As always, you can find more details in our…

    SVG Viewing & Diffing
    raimon49
    raimon49 2014/10/13
    画像diffと同じインタフェースでSVGも見られる。
  • D3.jsにあてはまらないこと | POSTD

    最近D3.jsをかなりいじってみました。APIをあれこれ調べ、すこし複雑なチャートを構築した後、長い間D3を誤解していたことに気づきました。それは私だけではありません。友達と話してみると、彼らもD3について勘違いをしています。そこで、よくある誤解のいくつかをはっきりとさせるために、この記事を書く事にしました。 D3はチャート・ライブラリではありません D3のホームページに行くと、たくさんの素晴らしいチャートとビジュアライゼーションを見ることができます。しかし、D3は、 Highcharts や Chart.js あるいは Google Charts のようなチャート・ライブラリではありません。ただ単に、データセットを受け渡すことや、必要なチャートのタイプ指定、凝ったチャートを入手することはできません。D3はそれよりもずっと低レベルなのです。D3上に構築されたチャート・ライブラリでは、たとえ

    D3.jsにあてはまらないこと | POSTD
    raimon49
    raimon49 2014/07/10
    SVGを直接操作するライブラリであってPolyfill実装ではない、など。
  • SVG MANIAX - CSS Nite After dark7

    「文書としてのSVG」の特徴、ブラウザでの挙動の違い、Webページヘの埋め込み方、フォールバックの方法などを紹介します。このスライドを見たあと、Illustrator で書き出した SVG のコードをぜひ眺めてみてください。Read less

    SVG MANIAX - CSS Nite After dark7
    raimon49
    raimon49 2014/05/13
    SVG SMIL animation知らなかった。
  • #ガチJS でJavaScriptとフロントエンドの未来について熱い話をした - mizchi's blog

    (追記): このブログで一部のJSをgithubに置いてたら 「The website abuses rawgit.com」という警告が出てました。現在修正しました。ご迷惑おかけしました。 @kyo_agoさんの主催で、 @mizchi(シングルページ系フロントエンドJSer) と @damele0nさん(ゲームHTML5のJSer)でJavaScriptについて話をした。すごく有意義な話だったので、会話を思い出せる限り書いてみる。 このエントリを読む前にこの記事を読むと幸せになれる。 幸せになりたいソーシャルゲーム系Webフロントエンドエンジニア気で考える HTML GUI ツール第一回 - damelog このまとめは僕の主観であり、僕が理解できた部分と自分の発言を一番覚えてるのでどうしてもそれが多めになりますが、ご容赦ください。ついでに酒入ってる。 iOS SafariのIE化

    #ガチJS でJavaScriptとフロントエンドの未来について熱い話をした - mizchi's blog
    raimon49
    raimon49 2014/04/30
    >なんか最近サーバーがAPI(のjson作る過程)だけテストするようになって、テスト書くの簡単になったみたいな話があるけど、それクライアントサイドに押し付けてきただけな気がしている
  • Shields.io | Shields.io

    Dynamic badges Show metrics for your project. We've got badges for hundreds of services.

    raimon49
    raimon49 2014/04/08
    バッジ生成 カバレッジも
  • http://daily.d3js.info/?p=296

  • AI-SVG がObjective-Cに変換できる、Qwarkeeがすごい!+きれいに拡大する方法 – Zero4Racer PRO Developer's Blog

    このアプリです。YouTubeの作者紹介ビデオはこちら SVGファイルがObjCコードに変換できるとのことです。これがPaintCodeに勝っているともいえる理由は、 デザイナがなれたソフト(Adobe Illustrator, InkScape)で絵を書ける AIでも、EPSでも、svgに変換すればよいです。 @natsun_happy @tomohisa いいですよねコレ。Illustratorとで試してみたのですが、グラデーションメッシュを使っているとアウトでした。drawRect:が空っぽになりました。 — KatokichiSoftさん (@hkato193) 5月 30, 2012 こんな報告もありますのでご注意を。 安い(PaintCodeは、8500円ですが、こちらはなんと450円) これは、描画のためのUIを用意していない点が大きいですね。しかし、AIや、InkScape

    raimon49
    raimon49 2013/04/12
    力技なアプリ
  • GitHub - SVGKit/SVGKit: Display and interact with SVG Images on iOS / OS X, using native rendering (CoreAnimation)

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - SVGKit/SVGKit: Display and interact with SVG Images on iOS / OS X, using native rendering (CoreAnimation)
  • Retina対応にSVGは本当に使えるのか?

    高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表

    raimon49
    raimon49 2013/03/23
    良くまとまってる
  • 固定レイアウトのEPUBって何なのよ? - 電書ちゃんねるBlog

    ろす 今回から、EPUBの固定レイアウト(Fixed Layout)について、徐々に踏み込んでゆきたいと思います。 ここで主に扱うのは2012年3月13日に発表されたInformational DocumentであるEPUB 3 Fixed-Layout Documentsという文書。EPUB3の仕様体からは切り離された位置づけにある文書ですが、出版デジタル機構や緊デジ(コンテンツ緊急電子化事業)の制作フォーマットとして利用される可能性もあり注目です。 EPUB 3 Fixed-Layout Documents 電書ちゃん 今日は入門者の立場に立って容赦なくツッコむわよ、覚悟しなさい。 そもそもEPUB=リフローが一般的な理解だと思うんだけど、固定レイアウトは、リフローしないレイアウトよね。つまり、ディスプレイや文字の大きさによって行の折り返しやページ区切りの位置が変化したりしないのよね

    固定レイアウトのEPUBって何なのよ? - 電書ちゃんねるBlog
    raimon49
    raimon49 2012/05/05
    絶対配置で指定されたCSS + HTML文書、1ページ丸ごと画像化、1ページ丸ごとSVG化したもの