SVGで画像を切り抜いてみよう

広がりつつあるSVG

このところSVGがWebにも広がりつつあり、たまに聞くけど、結局どう使うの？何に使えるの？という質問があります。

実際にSVGを使うとこんなことができるよ、というサンプルを紹介したいと思います。

まずはじめに。

SVGはどんなブラウザでも同じように見えるわけではありません。

現在のところ、IE8以下、Android 4.3以下ではサポートしていません。
（参照 http://caniuse.com/#search=svg、2015年11月）

SVGはjpgのような画像ファイルではなく、イラストレータ等で扱われる「ベクターデータ」です。

その特徴としては、
・拡大・縮小をしても画像の劣化がないこと
・ハイパーリンクなどを画像中に埋め込むことができる
などがあります。

画像を組み合わせて任意の形に切り抜いたサンプル

今回用意するもの
・画像（jpgデータ）×3枚

サンプル
http://sample.creativeflake.com/svg/

まずは画像を並べる

今回は、大きな「shape-container」という枠に、クロワッサンの写真を背景として置きました。

そしてその中に「shape-center」と「shape-right」という入れ子を作り、それぞれの背景にコーヒーの写真、カップケーキの写真を置きました。

切り抜く

今回切り抜くのは、入れ子にした、「shape-center」と「shape-right」を平行四辺形に切り抜きます。
（※切り抜き方は任意の形でOK）

まずは「shape-center」。
画面サイズを100%として考えます。

切り抜きのスタート地点の座標を（x座標, y座標）＝（40%, 0）としたときに、
そこからぐるっと平行四辺形を一周するように、各頂点の座標をそれぞれ、（20%, 100%）, （60%, 100%）, （80%, 0）となるようにします。

切り抜くCSSはclip-path: polygon（座標, 座標, ...）

この座標に、一周ぐるっと値を入力します。

もう片方の画像も同じように

もう片方の図形（shape-right）は台形に切り抜いていますが、こちらも同様、各座標を
（80%, 0）,（60%, 100%）,（100%, 100%）,（100%, 0)
としています。

切り抜く方向は自由

切り抜き方ではスタート地点をどこにしてもOKですし、時計回りでも反時計回りでもOKです。
一筆書きになるように。サンプルはこちら
http://sample.creativeflake.com/svg/

Written by Creative Flake

このブログの人気の投稿

ブログ移転のお知らせ

いつもご覧いただきありがとうございます。当ブログは下記URLへと引っ越しました。 http://blog2.creativeflake.com/ 今後はこちらをご覧ください！！

CSSでドット絵を描いてみよう

ドット絵（ピクセルアート）は1980年代ごろのパソコンやゲーム機で、最もよく使われた画像の表現方法でしたが、パソコン等の高解像度化にともなって、ドット絵を使われることはほとんどなくなりました。以前は解像度が低かったため、写真や画像を今のようにきれいに表示することができなかったので、ドットで描画することが主流でした。目で見てピクセルだと分かる範囲がドット絵と呼ぶそうです。今だからこそ逆に斬新、かわいいと思うこともあるのですが、せっかくなのでドット絵をCSSだけで描画したいと思います。もちろん、こんなチョコボを描くことも余裕でできます。ドット絵に使うCSS HTMLやCSSを使って描く表現方法はさまざま考えられますが、今回は「box-shadow」のみで描いていきたいと思います。 box-shadowでドットを描く HTML <div></div> まずHTMLには空のdivを用意してあげます。これだけでHTMLは完成です。 CSS div { background: transparent; width: 10px; height: 10px; box-shadow: 0 10px red, 10px 20px blue, 20px 10px green; } CSSは基点＜（0, 0）の場所＞をtransparent（透明）とし、基本となるドットの大きさを縦、横ともに10pxずつと設定します。そのときに、基点から下へ10pxの箇所に赤いドットを、右へ10px、下へ20pxの箇所に青いドットを、右へ20px、下へ10pxの箇所に緑のドットを描画します。 ↓↓↓こんな感じで表示されます本来box-shadow（ボックスシャドウ）は指定した要素に立体っぽく影をつけるCSSなのですが、ぼかし具合を入力しないことでゼロ、つまりただの直線として認識されます。ざくざく作っていこうこんな感じで、ドット絵を書いていくには元画像を準備し、ピクセル単位で描画していきます。チョコボを描く（HTML） <div id="chocobo...

Googleの検索結果から情報を削除する方法（2015年12月現在）

削除できるもの確実に削除できるコンテンツとしては、「法律に基づく削除」で具体的には次の2点です。・児童ポルノ・デジタルミレニアム著作権法（音楽、動画、ソフトウェアなどの無断コピー、海賊版など）に抵触するもの削除できる可能性が高いもの・個人情報　特に以下のもの ○国が発行する識別番号（マイナンバーなど） ○銀行口座番号 ○クレジットカード番号 ○署名（サイン）の画像 ○当人の承諾なしにアップロードまたは共有された、ヌードや露骨な性描写を含む画像個人情報でも削除の対象とならないものとして ○生年月日 ○住所 ○電話番号それらの情報を利用して、金融取引に使えたり、身元詐称に使えたりするものは削除の対象です。また公的な情報は削除の対象になりません。コンテンツやページを削除する方法まずはサイトの管理者に連絡し、削除依頼することをGoogleは推奨しています。その方法としては、１．当該サイトの「お問い合わせ」や連絡先メールアドレスがあればそこから連絡をする２．上記１のお問い合わせなどの連絡先がない場合、whoisを利用して、ドメインの所有者の連絡先を確認する３．上記２の直接の連絡先がない場合、サーバーホスティング会社に問い合わせるなぜサイト管理者に連絡するのか？仮にGoogleが検索結果から情報を削除したとしても、そのWebページやコンテンツは残ったままです。 URLもそのまま存在するわけなので、直接URLにアクセスするとページは見える状態にあります。クレジット番号やマイナンバーなどの情報が公開されている場合クレジット番号やマイナンバーなどの個人情報が含まれる場合は、できるかぎりサイト管理者に連絡したうえで、Googleにも確認してください。 https://support.google.com/websearch/troubleshooter/3111061 Written by Creative Flake

フレークの素 | Web制作・システム開発のCreativeFlakeブログ

このブログを検索