SVGとは画像形式の１つで、おなじみのJPG形式やPNG形式と違い、２次元ベクターなので拡大縮小しても画質が落ちないというメリットがあります。また、XMLというマークアップ言語で記述されるため、テキストとしてテキストエディタで編集できるのが特徴です。
このSVGをwebデザインに応用すると、かなりクレイジーなことができてしまいます。なんと、ページにコードを書くだけで、画像ファイルを用意することなくイラストやアニメーションを描くことができるのです。
今回ここでご紹介するのは、webページに貼り付けて使えるSVGを使ったクールな風景イラストです。アニメーションやパララックスなどのギミックは、いくつかの簡単なCSSとJavaScriptで作られています。そしてこれらはすべて、自由に編集して使用することが可能です。
それでは行ってみましょう！
１．タカのいる入江
See the Pen
SVG Landscape, Hawke’s Bay by Louis Coyle (@dropside)
on CodePen.
この美しい入江のイラストは、Louis Coyleが制作したものです。
作者は3Dレンダリングでよく見られる、
スポンサーリンク
テキストエディタだけで絵が描ける！？CSSとSVGで作る風景イラスト１２選
マーケティング最新
コメント