[B! SVG] hiro14akiのブックマーク

君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA

ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。クイズ：どうやって実現する？　webでできるさまざまな表現下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています

hiro14aki 2020/07/06

リンク

Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG

Zdog Round, flat, designer-friendly pseudo-3D engine for canvas & SVG What is Zdog? Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special. Zdog is small. 2,100 lines of code for the entire library. 28KB minified. Zdo

hiro14aki 2019/05/30

SVG

リンク

書いて覚えるSVG: 基礎編

この記事のターゲットとなる方この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。記事を読むだけでなく、PCで「CodePen」というオンラインのテキストエディターを開き、SVGを書いていくことでより深く理解できるようにしています。ぜひ記事を読みながら一緒に書いてみてください。 SVGは他の画像形式と何が違うの？この記事をご覧の皆様は「SVG」をどのようなものだと思っているでしょうか？たとえば、JPEGやPNGと同じような「Web用の画像形式の一種」だと思っていらっしゃる方もいるかもしれません。しかし、SVGはJPEGやPNGと明確に違うところがあります。 SVGファイルの中身はテキストデータであり、HTMLやCSSのようにテキストエディターを使って編集したり、新規制作したりすることができます。