タグ

HTMLとSVGに関するraimon49のブックマーク (7)

  • 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」のために自前でフォントを用意していることがわかった。
  • グリグリ動く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に無い強みだよなぁ。
  • SVG MANIAX - CSS Nite After dark7

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

    SVG MANIAX - CSS Nite After dark7
    raimon49
    raimon49 2014/05/13
    SVG SMIL animation知らなかった。
  • 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化したもの
  • SVGをobject要素で活用する | 水無月ばけらのえび日記

    更新: 2012年2月24日23時20分頃 SVGというものはずっと昔からありました。かつてはブラウザ側の対応がいまいちで、プラグインを入れたりしないと表示できなかったりもしており、あまり使われていませんでした。しかしIE9がSVGに対応したことで、かなり使えるようになってきた印象があります。最近では仕事でもガチでSVGを使うことが増えてきています。 SVGの特長のひとつは、ベクターグラフィックなので伸び縮みに強いという点です。サイズ可変の領域にうまい具合に背景を敷きたいときには便利です。そして、最近はサイトのコンテンツ全体がサイズ可変ということも増えてきました。というか元々可変ではあると思うのですが、Media Queries (www.w3.org)を使った派手な変更を伴うパターンが増えてきて、画像のサイズを大幅に変更したいケースが増えてきています。 写真などはJPEG画像を拡大・縮小

    raimon49
    raimon49 2012/02/12
    >object要素を使ってSVG画像を貼り、その中でimg要素を使って代替のPNG画像を指定すれば良いのです。
  • 「Flash vs. HTML5」という構図がはっきりと見え始めたぞ、と

    業界関係者(特にスマートフォン関係の仕事をしている人たち)少し前からすでに気がついていた話だが、今回のAdobeからの一連のアナウンスメントで明らかになってきた「HTML5対Flash」という構図。とてもワクワクする戦いだ。 ウェブ上のリッチコンテンツという分野でリーダーシップ・ポジションを取りながらも、「無料Flashゲーム」と「ウェブサイトの見栄えをちょっと良くするアイ・キャンディ」というニッチなポジションに一度は追いやられるように見えたFlash(数年前の話)。しかし、動画フォーマットがReal Networks、MicrosoftAppleの三強いの間で中に浮く隙間を付いた戦略で、見事に「ウェブ上のマルチメディアのデファクト・スタンダード」のポジションをがっちりつかんだかに見えるFlash(現在)。しかし、その地位も安泰ではない。 Adobeにとって一番頭の痛い問題はiPhone

    raimon49
    raimon49 2009/10/06
    RIAのデファクトスタンダードを目指す規格いろいろ。
  • 1