SVG Explorer Extensionを使ってエクスプローラーでSVGファイルのサムネイルを表示した

PC・スマホ公開日:2020年06月25日

タイトルとURLをコピー

1.結論

以前Media Previewというソフトを使ってエクスプローラー上で動画のサムネイルを表示したんですけど

Media Previewを使ってエクスプローラーで動画のサムネイルを表示した | ディグログ

自作パソコンを組んでから結構経つんだけど、必要だったりあったら便利なソフトの導入が済んでないわけですわ。んで今回はエクスプローラーで動画サムネイルを表示させたからそれについて忘れないように書いておく。先日妻とキャンプに行った際に使った中華ア…

ディグログ

今回はそれのSVG版ですね。
SVGってのは画像フォーマットの一つで、jpgやpngみたいなラスター画像（ビットマップ画像）と違ってベクター画像なんですよ。
拡大してもザリザリにならない便利な画像形式だって覚えといきゃいいと思います（雑
興味ある人は調べてください。そして僕に教えてください。

当たり前のようにどのブラウザも対応してるんでアイコンやロゴはpngではなくsvgを使ってくのが良いと思いますよ。~~古いIEは全無視でいいです。~~

最近のIEで表示がおかしい時はテキストエディタで開いてwidthとheightを指定してやると直るかもです。

IEではSVGが表示されない！？原因説明＆バグ解消アプリ作ってみた | HP作成のくえり【東京】

Webサイトの表示確認をする際に、Chrome、Firefox、Safariなど他のブラウザでは正常に表示されているのにIE11だけ正常に表示されない。そんな場面に出くわしたことはありませんか？原因は、SVGファイルにwidth属性とheight属性が指定されていないことです。そこでSVGファイルにwidthとheightを追加するアプリを作ってみました。

queryinc.co.jp

ちなみにこのブログのロゴもSVGです。
追記：なにげなくIEでこのブログを開いてみたらモロにロゴの表示がおかしくなっていて一人にツボに入った後に上記の方法で解消しました。

昨日よりブログをいじった話と晩ごはん | ディグログ

妻は

ディグログ

本題ですけどそんなSVGをエクスプローラーのサムネイルで表示したいってなってググったら同じこと思ってる人たくさんいましたよ。
参考にしたページ貼っときますね。

Windowsのエクスプローラ上でSVGファイルのサムネイルを表示できるようになるフリーソフト「SVG Explorer Extension」

シェアしてね♪ Tweet 格安で広告掲載してみませんか？ Tweet SVG Explorer Extensionは、Windowsのエクスプローラ上で、SVGファイルのサムネイルを表示できるようになるフリーソフトです…

techmemo.biz

何したらいいかっていうと一行で終わるんですけどSVG Explorer Extensionってソフトを入れとけって話です。DLは以下からドゾ

https://github.com/tibold/svg-explorer-extension/releases

なんかgithubではブックマークレットを利用したリンク取得ができなかったからテキストリンクで。こういうときは開発者ツールからconsole見ればいいの？どんな顔をすればいいの？

記事内にカード型のリンクを簡単に挿入できるようにした | ディグログ

妻が打首獄門同好会にハマって助手席で叫んでます。僕です。記事内で他のサイトのリンクを貼るとき、ただの文字リンクだけじゃ味気ないじゃないですか。そこでカード型のリンクを簡単に設置できるようにしました。はてなブログなどでよく見るやつですね。…

ディグログ

結論

最近思いついたデザインをこのブログに試しに当ててみるってのを繰り返してて、執筆時は黄色と黒のパキパキゴテゴテデザインです。最初はセックス・ピストルズよろしくもっとキツイ黄色に#000でチカチカコントラストかましてたんだけど、もうちょっと人と目に優しくありたいと思ってちょっと抑えました。

デザインを作る時に#000の黒は使わない方が良い – 5log

私は高校時代、美術部で油絵を描いていたのですが、その時に顧問の先生に度々言われたのが「絵の具の黒は使うな」という事です。暗さを表現したい箇所は絵の具チューブの黒を使わず、濃い赤や緑、青を組み合わせて黒っぽい色を作り、それを使えと言われたので、当時は言われるがまま従っていたのですが、今デザイン制作の業務に携わっていると、その理由がよく分かるようになりました。そこで今回は、カラーコード「#000」の黒は使わない方が良い、という理由について紹介していこうと思います。はじめに：#000とは？ #000を使ってデザインを作るとどうなるのか #000を使ったバナーが見づらく感じる要因 #000を使うべ…

5log.hateblo.jp

また飽きてすぐ変えると思います。