神奈川工科大学 情報メディア学科のSVG教材に無限にツッコミが入れられそうな件 - 水底の血
これを知ったのは偶然次のツイートを目にしたからなんですけども。 『SVG ではじめる Web Graphics 2016年度版(情報メディア専門ユニットI)』 たまたま見つけたんだけど、読み入ってしまった。#SVG https://t.co/C1fSijXyiM— 松田直樹（まぼろし） (@readymadegogo) 2017年1月13日 このツイートで取り上げられている文書（PDF）はSVGではじめるWeb Graphics 2016年度版になる。ちなみに、2016年度 情報メディア専門ユニット（セミナーI） - 神奈川工科大学 情報学部 情報メディア学科を見る限りでは、3年次の講義に使われるものらしい。 でまあ中身を読んでみたんですけど、1.1節からしてなんだか微妙で、 Web 上での各種規格は World Wide Web Consortium(W3C) と呼ばれる組織が中心になっ
【追記あり】SVGコードゴルフと,GIZMODO「Google新ロゴ」記事へ反論 - 聴く耳を持たない(片方しか)
＜ここから追記：2015-09-10＞当初投稿した内容が、前提から誤った思い込みで書かれておりました、詳しくは後半の追記を参照してください。 ＜／追記ここまで＞ はじめに先日こうしたツイートが話題になりました。 https://twitter.com/thespite/status/639107572679712772 これは先頃リニューアルが発表されたGoogle社のロゴ Evolving the Google Identity - Library - Google Design がシンプルな構成に見えることから、それを荒く手軽に作るなら（quick and dirty version）290バイトで作れるよ！という内容です。 リンク先の中身を見てみるとこのような490バイトのSVGファイルになっており <svg xmlns="http://www.w3.org/2000/svg" wi
SVGの最新ニュースなどを毎週お届けする「週刊SVG」を始めました - 聴く耳を持たない(片方しか)
はじめに 週刊SVG http://ssvvgg.net/ タイトルの通り、SVGの最新のニュースや関連のアプリやツール、また制作時のコツ・ブラウザ毎の差異への対応策などSVGに関わる様々な話題を取り上げる「週刊SVG」というブログを始めました。 またそれの更新状況やSVGの記事などをツイートするアカウント@sssssvgも同時に始めましたので、よければそちらもフォローしてみてください！ ……ま、この記事の主題は以上で終了なのですが、なぜそんなものを始めようと思ったのか？という理路についてつらつらと書いてみました。 経緯とか他分野の動向などSVG以外の分野でこうした媒体というのはいくつかあり、国内で有名なのはJavaScriptの話題を中心にしたJser.infoが@azu_reさんによって運営されています。 Jser.info フロントエンド方面だと名前の通り「Frontend Week
SVGの見え方がブラウザで違う（解決）
SVGの見え方がブラウザで違う（解決） 要約 結城浩のアイコン（スレッドお化け坊や）をSVGで作ったのですが、Firefoxだけ縦長になってしまいました。 SVGのwidth,heightが等しくないのに正方形を指定して、しかもviewBoxが指定してなかったからとの指摘で解決しました。 HTML <!DOCTYPE html> <html> <img style="border: 1px solid black; width: 100px; height: 100px" src="https://snap.textfile.org/static/images/hyuki-ghost-bold.svg"> </html> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (ht
私のサイトは"SVG"を返す - cocuh's note
お久しぶりです。こくです。 私のサイトのことについての記事です。 1年前から変えてあるのですが、 だれも気づかないので そろそろ軽く書きます。 typowriter.org index.svgおじさん 私のサイトのスクショあるじゃろ。 ここに /i_love_svgへのリンクがあるじゃろ。 /index.svgに飛ぶのじゃ。 sidebarのアニメーションとかはないですが、ほとんど同じ見た目のページを返します。 これからちょくちょく index.svgのサイト増えていくんじゃないかなと思っていますが、まぁ流行らないでしょう。 (一度SVGで書くとhtml代わりにつかうツラさがわかります。。。座標全部手打ちなので。。。) http accept headerも 私にリアルで会っている方には話してたりしますが、 HTTPのacceptヘッダにimage/svg+xmlを入れて投げるとこっちも
SVGをdata URI schemeに変換するとき文字化けしないように必要なこと - 聴く耳を持たない(片方しか)
現在、パソコン、スマートフォン、タブレットと様々な画面サイズの情報機器が世の中に溢れています。そうした端末に適切に対応するには画像も色々なサイズのものをいくつも用意する必要があるわけですが、SVGのようなベクター画像であればそうした手間も少なくて済むのがメリットです。 例えば、AppleのサイトではロゴにSVGを使っています。 https://www.apple.com/jp/iphone/ そしてそのロゴを調べてみるとSVGをdata URI schemeで指定しているのが分かりますね。 data URI schemeはHTML文書内に記述できるため、画像ファイルのリクエストを減らして素早く画面表示が行えるという利点がありますから、世界中から多くのアクセスを集めるAppleのサイトで採用されているのでしょう。 こうした使われ方も多いことから、data URI schemeを簡単に作成でき
今年こそついにSVG元年？まだ間に合う！SVGの学習に役立つサイト紹介 - 聴く耳を持たない(片方しか)
先日AdobeからこのようなJavaScriptライブラリが公開されました Snap.svg http://plus.adobe-adc.jp/post-4817/ 以前から人気の高かった、IE6でもSVGを表示できるJavaScriptライブラリRaphaelの作者 Dmitry Baranovskiy氏による新たなライブラリで、Raphaelとの違いはSnap.svgではIEなら9以上対応とモダンブラウザを対象にしたこと。さらに自由度と表現力の高いことができるようになっているのが大きな特徴です。 こうしたJavaScriptライブラリがオープンソースで、そしてAdobeから公開されたのは大きなことでこれからSVGもどんどん普及していくのではないでしょうか。 まさに2013年こそついにSVG元年と言えるかもしれません*1。 ……とは言え、そもそもSVGってなに？という人もまだまだ少なくな
SVGよりアイコン・フォント！ な理由
両者は共にスケーラブルなもの(にできるもの)なのでその点では互角だけど、様々なプロパティーを持ち多彩な表現が可能なSVGの方がフォーマット的には優位にあると言って良い。が、なかなか利用が広まらないSVGに対して、アイコン・フォントの利用は急速に拡大している。単に流行りとみなす向きもあるけど、やっぱりそれなりに理由があるのではないかと思う。 CSSとの親和性 特に以下の3つのCSSプロパティーは効果的に使える。 font-size color text-shadow PNGで作られたアイコンの色を変更するには編集が必要だけど、アイコン・フォントはCSSファイルで自由に色を調整することができる。独自実装も含めるなら-webkit-maskプロパティーもとても(想像以上に)効果的に使うことができる。他にもちょっとした位置の調整やなんかも慣れ親しんだCSSで普通に可能。更にこれらをHTMLファイル
svg要素の基本的な使い方まとめ
この文書ではsvgをhtml埋め込みデータとして扱う際の覚書として作成した．svgの要素と属性は実際の例を踏まえて説明したつもり． 注意事項 仕様はここを参照のこと． 本文書では実際の挙動を調べつつ自分なりの解釈が入っているため，多々間違いが入ってしまうかもしれないが，気にしない． スクリプトを使ってsvg要素の中身(ソース)を出力しているため，一部実際のコードと表示されるコードとの間に差異があるが，予めご了承いただきたい． 目標は見栄えのする図形をsvgの手入力でサラっと記述できるようになることなので，複雑な図形は素直にinkscape等専用のツールを使うと良い．ただ，ここで示したことはツールを使う上でも役に立つと思う．特にアニメーションなど． svg:ベクター画像のカンバスの定義，title:タイトル，desc:説明 html文書においてsvg画像を挿入したい場合,embed要素を用い
外部のCSSを参照したSVGは思うように参照できるか - fragmentary
おおおお、なるほどー！ HTML -> CSS -> SVG -> CSS - Weblog - hail2u.net ただやっぱり、CSSの外部参照は厳しそうですね。 SVGから外部スタイルシートを参照するその他の方法 SVGから外部CSSを読み込む方法としては、記事にあるxml-stylesheet PIを使う他に、SVGの<style>要素を使うという手がある。SVGでCSS使う際にも @import が使えるので、そこから参照してやればよい。あ、XMLだから要素の内容はちゃんとCDATAセクションで囲ってね。 <style><![CDATA[ @import url(external.css); ]]></style> <svg:style>を使ったSVGファイルを直接開いたら、PIの例と同じようにChrome (dev), Firefox (beta), Opera (Next)
Inkscapeでちゃんと移動させる - Hail2u
Inkscapeでオブジェクトを移動させたりする時に適当にドラッグアンドドロップとかでやるとtransformプロパティーでtranslate()関数を使った形の移動が行われる。出力されるSVGのサイズの節約などのためにちゃんと(?)移動させたい場合はメニューのオブジェクトにある整列と配置を使ったり、変形ダイアログで相対移動のチェックボックスをオフにして座標指定で移動させる必要がある。 Inkscape's Transform Dialog 既にtransformプロパティーがついてしまっている場合はメニューの編集からXMLエディタで消した後にちゃんとやり直すとか……なのかよくわからない。他になんかちゃんとやり方ありそう。 スクリーンショットみたいにWindowsのInkscapeのUIフォントをまともに(Segoe UIとメイリオの組み合わせに)する方法は思い出せたら書く。
HTML -> CSS -> SVG -> CSS
HTMLで参照しているCSSでSVGを参照する……まではマイナーとはいえ使っている人はいると思う。これでまぁスケーラブルな画像という条件は満たせるのだけど、せっかくSVGではCSSを参照できるのだから、そのCSSでSVGのスタイルも指定できたら色々便利でリソースの節約にもなるんじゃないかという実験……が失敗に終わった話。タイトルわかりづらい。 Demo: HTML -> CSS -> SVG -> CSS SVGでCSSを使う方法は簡単で、<?xml-stylesheet?>を使うだけ。CSSでスタイルを書きやすくするためid属性を指定しておくと良い。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml-stylesheet type="text/css" href="test.css"?> <svg id="foo"
アウトラインのSVGからフォントを生成 #かな書いてみる - しろもじメモランダム
IVSやら何やら他の話題に飛びついていたので間が空いてしまったが、明朝かな書体制作のつづき。前回はアウトラインを作ったので、今回はここからフォントを生成したい。 SVGの分割 hiragana_1.svg まず、これがアウトラインのファイル。Inkscape で作成し、SVGとして保存した。アウトラインは outline という名前のレイヤーの中に作っている。仮想ボディのサイズは100pxとした。 これをグリフごとに分割し、1文字1ファイルにする。今回は（も？）Perl で簡単なスクリプトを書き、これを利用した。単純なものなので、path 要素以外の要素（グループも含む）に対応していないなどいろいろと制限はある。また XML::Simple を利用しているので、実行するには XML::Simple のインストールが必要。 split_svg.pl #!/usr/bin/perl # # S
SVGのフィード・アイコン
背景を完全に透明にして白い丸と円弧の部分だけのフィード・アイコンを作ってみました(上の画像は背景がオレンジ色になっていますが、CSSで背景色を指定しているだけです)。Wikimedia CommonsにあるSVGアイコンをエディタでいじっただけですけどね。SVGファイルのソースにコメントとして書いてあるように元ファイルと同じくMPL/GPL/LGPLのトリプル・ライセンスです。 Demo: SVG Feed Icon SVGファイルのソースはデモ・ページの最後に載せてあるのでそれをHTMLファイルにコピペしても良いですし、普通にドラッグ・アンド・ドロップや右クリックで保存してimg要素で参照しても良いでしょう。このページやデモ・ページではData URIスキーム化したものを直接使っています。500バイト強の小さなものなのでData URIスキーム化して使うのが良いと思います。 アイコンの丸
小さなアイコン画像のSVG化に·pixel2svg MOONGIFT
pixel2svgは画像をSVGへ変換するPythonスクリプトです。 pixel2svgはその名の通り、ピクセル画像をSVGファイルへ変換できるソフトウェアです。Pythonスクリプトで、ターミナルベースで動作します。 処理を実行した所。解析処理が開始されます。 対応している画像はPNG、JPEGの他PIL（Python Imaging Library）で対応している画像なら何でもSVG画像に変換できるようです。 解析が終わると同じファイル名で拡張子がsvgのファイルが生成されます。 今回の変換元になった画像。PNGファイルで33KBです。 変換が終わったファイルはSVGなのでWebブラウザで開いたり、IllustratorやInkscapeで編集できます。なお変換後のサイズは999KBで、かなり大きくなっています。 SVG画像。忠実に再現されています。 その代わり、相当拡大することもで
bAの株主交代、そして組織に思うこと | 水無月ばけらのえび日記
公開: 2011年7月10日23時15分頃 「当社の葵プロモーショングループ入りに関するお知らせ (www.b-architects.com)」で予告されていたとおり、今日から株主が交代して葵プロモーショングループの一員となったようです。 ※ちなみに葵プロモーションはCM制作を主に行う会社で、業界では3指に入る規模、東証一部上場企業でもあります (銘柄コード9607 (quote.tse.or.jp))。 が、bAのオフィス内では特に何の変化も見られず。もっと変化があっても良さそうですが、bAの場合はあまり影響がないのかもしれないな、とも思います。 ……あらかじめ断っておきますが、以下に書くことは私の個人的な考えで、bAのメンバーがみんなそう思っているという訳ではありません。むしろ違うと思っている人の方が多いかもしれません。 bAという会社は元々、各方面で活躍していた人々が「集まれば凄いこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://cube.crider.co.uk/visualcube.php
Tumblr
Tumblr
Combine Multiple PNG Images with SVG
{{#tags}}- {{label}}
{{/tags}}