SVG コーディング

ユイト🍓

この本でSVG学習

ユイト🍓

SVGとは

Scalable Vector Graphics(スケーラブルベクターグラフィックス)の略
画像フォーマットの一種で、XML（eXtensible Markup Language）の仕様に従って画像を作成・表示することができる。

参考リンク

ユイト🍓

Code Penのsvgコード見て勉強しよ

ユイト🍓

これめっちゃかっこいい↓

ホバーしたらアニメーションゆっくりになるのもいい
タイムリマップっていうんか
https://ics.media/entry/7162/

こういうテキストはイラレでアウトライン化してナイフツールで切るといいらしい

グループ化する

ユイト🍓

コードペンのコードを見ていく

index.html

<figure>
<svg x="0px" y="0px" viewBox="0 0 883 105.2" xml:space="preserve" overflow="visible">
<polygon points="359.9,49.6 359.8,49.7 359.9,49.8 "/>
<polygon points="28,0 10.8,0 28,9 "/>
<polygon points="28,12.6 0,46 0,51.9 28,48.9 "/>
<polygon points="0.8,105 28,105 28,74.7 20.3,69.7 "/>
<polygon points="28,9 10.8,0 0,0 0,46 28,12.6 "/>
<polygon points="0,51.9 0,57.3 20,69.8 20,69.8 20,69.8 28,74.7 28,48.9 "/>
<polygon points="0,57.3 0,105 0.8,105 20.1,69.7 "/>
<polygon points="89.7,40.6 61,25.9 38,46 38,47.8 91,41.9 "/>
<polygon points="89.7,40.6 68.4,19.4 61,25.9 "/>
<polygon points="99,41 126,37.9 126,30.3 99,0 99,0 "/>
<polygon points="38,47.8 38,48.9 103.1,63.5 98.9,49.8 91,41.9 "/>
<polygon points="68.4,19.3 49.2,0 38,0 38,14.1 61,25.8 "/>
<polygon points="38,48.9 38,80.9 66,98.3 66,55.5 115.2,105 115.8,105 103.1,63.4 "/>
<polygon points="61,25.9 38,14.1 38,46 "/>
<polygon points="38,105 66,105 66,98.3 38,80.9 "/>
<polygon points="126,0 99,0 126,30.3 "/>
<polygon points="99,49.8 102.9,63.5 126,68.7 126,59.4 99,45.3 "/>
<polygon points="99,41 99,45.3 126,59.4 126,37.9 "/>
<polygon points="115.8,105 126,105 126,68.7 102.8,63.4 "/>
<path d="M225.8,74.2l-12.6,24.5c7.5,4.1,16.1,6.5,25.3,6.5c2.2,0,4.3-0.1,6.4-0.4L237,77.7C233,77.5,229.1,76.2,225.8,74.2z"/>
<path d="M213.8,55.7l-20.8,23c4.8,8.4,11.8,15.4,20.3,20.1l12.6-24.5C219.3,70.3,214.7,63.5,213.8,55.7z"/>
<path d="M238.5,77.8c-0.5,0-1,0-1.4,0l7.8,27.1c8.7-1,16.7-4.2,23.6-8.9l-14.6-23.3C249.5,75.8,244.3,77.8,238.5,77.8z"/>
<path d="M251.5,31.3c6.7,4.1,11.3,11.2,11.9,19.4l27.5,1.5c-0.1-12.4-4.6-23.9-12-32.8L251.5,31.3z"/>
<path d="M263.6,52.7c0,8-3.8,15.2-9.8,19.8l14.6,23.3c13.6-9.4,22.6-25.2,22.6-43c0-0.2,0-0.4,0-0.6l-27.5-1.5
  C263.5,51.4,263.6,52,263.6,52.7z"/>
以下省略
</svg>
</figure>

svg
- polygon
- path

で構成

`<svg>`についている属性

x属性

x 属性はユーザー座標系の X 軸の座標を定義
<svg>においてはビューポートの左上隅が基準で水平方向の位置を指定する。
x=0pxは完全に左上隅

xmlns属性

<svg xmlns="http://www.w3.org/2000/svg">
</svg>

「ブラウザたちに告ぐ。svgの仕様に従って解析し、レンダリングせよ」という命令文。
ない場合、正しく表示されない可能性がある

ユイト🍓

今日はこれ↓

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1360 772" width="1360" height="772" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;"><defs><clipPath id="__lottie_element_16"><rect width="1360" height="772" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_16)"><g transform="matrix(1,0,0,1,1119.3970947265625,353.5379943847656)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,120.34600067138672,207.08200073242188)"><path fill="rgb(0,0,0)" fill-opacity="1" d=" M0.0010000000474974513,-206.83200073242188 C-75.61499786376953,-206.83200073242188 -120.09500122070312,-162.3520050048828 -120.09500122070312,-81.73200225830078 C-120.09500122070312,-81.73200225830078 -120.09500122070312,85.73200225830078 -120.09500122070312,85.73200225830078 C-120.09500122070312,166.3520050048828 -75.61499786376953,210.83200073242188 0.0010000000474974513,210.83200073242188 C75.61699676513672,210.83200073242188 120.09700012207031,166.3520050048828 120.09700012207031,85.73200225830078 C120.09700012207031,85.73200225830078 120.09700012207031,-81.73200225830078 120.09700012207031,-81.73200225830078 C120.09700012207031,-162.3520050048828 75.61699676513672,-206.83200073242188 0.0010000000474974513,-206.83200073242188z M40.5890007019043,95.18399810791016 C40.5890007019043,130.76800537109375 25.57699966430664,150.22799682617188 0.0010000000474974513,150.22799682617188 C-26.131000518798828,150.22799682617188 -40.58700180053711,130.76800537109375 -40.58700180053711,95.18399810791016 C-40.58700180053711,95.18399810791016 -40.58700180053711,-91.18399810791016 -40.58700180053711,-91.18399810791016 C-40.58700180053711,-126.76799774169922 -26.131000518798828,-146.22799682617188 0.0010000000474974513,-146.22799682617188 C25.57699966430664,-146.22799682617188 40.5890007019043,-126.76799774169922 40.5890007019043,-91.18399810791016 C40.5890007019043,-91.18399810791016 40.5890007019043,95.18399810791016 40.5890007019043,95.18399810791016z"></path></g></g><g transform="matrix(1,0,0,1,909.52001953125,362.8699951171875)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,91.98999786376953,197.6300048828125)"><path fill="rgb(0,0,0)" fill-opacity="1" d=" M-15.01200008392334,23.908000946044922 C-15.01200008392334,23.908000946044922 80.06400299072266,23.908000946044922 80.06400299072266,23.908000946044922 C80.06400299072266,23.908000946044922 80.06400299072266,-35.58399963378906 80.06400299072266,-35.58399963378906 C80.06400299072266,-35.58399963378906 -15.01200008392334,-35.58399963378906 -15.01200008392334,-35.58399963378906 C-15.01200008392334,-35.58399963378906 -15.01200008392334,-137.88800048828125 -15.01200008392334,-137.88800048828125 C-15.01200008392334,-137.88800048828125 87.8479995727539,-137.88800048828125 87.8479995727539,-137.88800048828125 C87.8479995727539,-137.88800048828125 87.8479995727539,-197.3800048828125 87.8479995727539,-197.3800048828125 C87.8479995727539,-197.3800048828125 -91.73999786376953,-197.3800048828125 -91.73999786376953,-197.3800048828125 C-91.73999786376953,-197.3800048828125 -91.73999786376953,197.3800048828125 -91.73999786376953,197.3800048828125 C-91.73999786376953,197.3800048828125 91.73999786376953,197.3800048828125 91.73999786376953,197.3800048828125 C91.73999786376953,197.3800048828125 91.73999786376953,137.88800048828125 91.73999786376953,137.88800048828125 C91.73999786376953,137.88800048828125 -15.01200008392334,137.88800048828125 -15.01200008392334,137.88800048828125 C-15.01200008392334,137.88800048828125 -15.01200008392334,23.908000946044922 -15.01200008392334,23.908000946044922z"></path></g></g><g transform="matrix(1,0,0,1,702.1060180664062,362.8699951171875)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,87.26399993896484,197.6300048828125)"><path fill="rgb(0,0,0)" fill-opacity="1" d=" M-87.01399993896484,-197.38099670410156 C-87.01399993896484,-197.38099670410156 -87.01399993896484,201.3800048828125 -87.01399993896484,201.3800048828125 C-87.01399993896484,201.3800048828125 87.01399993896484,201.3800048828125 87.01399993896484,201.3800048828125 C87.01399993896484,201.3800048828125 87.01399993896484,133.54800415039062 87.01399993896484,133.54800415039062 C87.01399993896484,133.54800415039062 -10.28600025177002,133.54800415039062 -10.28600025177002,133.54800415039062 C-10.28600025177002,133.54800415039062 -10.28600025177002,-197.38099670410156 -10.28600025177002,-197.38099670410156 C-10.28600025177002,-197.38099670410156 -87.01399993896484,-197.38099670410156 -87.01399993896484,-197.38099670410156z"></path></g></g><g transform="matrix(1,0,0,1,415.39697265625,353.5379943847656)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,120.34600067138672,207.08200073242188)"><path fill="rgb(0,0,0)" fill-opacity="1" d=" M0.0010000000474974513,-206.83200073242188 C-75.61499786376953,-206.83200073242188 -120.09500122070312,-162.3520050048828 -120.09500122070312,-81.73200225830078 C-120.09500122070312,-81.73200225830078 -120.09500122070312,85.73200225830078 -120.09500122070312,85.73200225830078 C-120.09500122070312,166.3520050048828 -75.61499786376953,210.83200073242188 0.0010000000474974513,210.83200073242188 C75.61699676513672,210.83200073242188 120.09700012207031,166.3520050048828 120.09700012207031,85.73200225830078 C120.09700012207031,85.73200225830078 120.09700012207031,-81.73200225830078 120.09700012207031,-81.73200225830078 C120.09700012207031,-162.3520050048828 75.61699676513672,-206.83200073242188 0.0010000000474974513,-206.83200073242188z M40.5890007019043,95.18399810791016 C40.5890007019043,130.76800537109375 25.57699966430664,150.22799682617188 0.0010000000474974513,150.22799682617188 C-26.131000518798828,150.22799682617188 -40.58700180053711,130.76800537109375 -40.58700180053711,95.18399810791016 C-40.58700180053711,95.18399810791016 -40.58700180053711,-91.18399810791016 -40.58700180053711,-91.18399810791016 C-40.58700180053711,-126.76799774169922 -26.131000518798828,-146.22799682617188 0.0010000000474974513,-146.22799682617188 C25.57699966430664,-146.22799682617188 40.5890007019043,-126.76799774169922 40.5890007019043,-91.18399810791016 C40.5890007019043,-91.18399810791016 40.5890007019043,95.18399810791016 40.5890007019043,95.18399810791016z"></path></g></g><g transform="matrix(1,0,0,1,205.52001953125,362.8699951171875)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,91.98999786376953,197.6300048828125)"><path fill="rgb(0,0,0)" fill-opacity="1" d=" M-15.01200008392334,23.908000946044922 C-15.01200008392334,23.908000946044922 80.06400299072266,23.908000946044922 80.06400299072266,23.908000946044922 C80.06400299072266,23.908000946044922 80.06400299072266,-35.58399963378906 80.06400299072266,-35.58399963378906 C80.06400299072266,-35.58399963378906 -15.01200008392334,-35.58399963378906 -15.01200008392334,-35.58399963378906 C-15.01200008392334,-35.58399963378906 -15.01200008392334,-137.88800048828125 -15.01200008392334,-137.88800048828125 C-15.01200008392334,-137.88800048828125 87.8479995727539,-137.88800048828125 87.8479995727539,-137.88800048828125 C87.8479995727539,-137.88800048828125 87.8479995727539,-197.3800048828125 87.8479995727539,-197.3800048828125 C87.8479995727539,-197.3800048828125 -91.73999786376953,-197.3800048828125 -91.73999786376953,-197.3800048828125 C-91.73999786376953,-197.3800048828125 -91.73999786376953,197.3800048828125 -91.73999786376953,197.3800048828125 C-91.73999786376953,197.3800048828125 91.73999786376953,197.3800048828125 91.73999786376953,197.3800048828125 C91.73999786376953,197.3800048828125 91.73999786376953,137.88800048828125 91.73999786376953,137.88800048828125 C91.73999786376953,137.88800048828125 -15.01200008392334,137.88800048828125 -15.01200008392334,137.88800048828125 C-15.01200008392334,137.88800048828125 -15.01200008392334,23.908000946044922 -15.01200008392334,23.908000946044922z"></path></g></g><g transform="matrix(1,0,0,1,0.1060028076171875,362.8699951171875)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,87.26399993896484,197.6300048828125)"><path fill="rgb(0,0,0)" fill-opacity="1" d=" M-87.01399993896484,-197.38099670410156 C-87.01399993896484,-197.38099670410156 -87.01399993896484,201.3800048828125 -87.01399993896484,201.3800048828125 C-87.01399993896484,201.3800048828125 87.01399993896484,201.3800048828125 87.01399993896484,201.3800048828125 C87.01399993896484,201.3800048828125 87.01399993896484,133.54800415039062 87.01399993896484,133.54800415039062 C87.01399993896484,133.54800415039062 -10.28600025177002,133.54800415039062 -10.28600025177002,133.54800415039062 C-10.28600025177002,133.54800415039062 -10.28600025177002,-197.38099670410156 -10.28600025177002,-197.38099670410156 C-10.28600025177002,-197.38099670410156 -87.01399993896484,-197.38099670410156 -87.01399993896484,-197.38099670410156z"></path></g></g></g></svg>

https://www.leoleo.studio/

ユイト🍓

`<defs>`

<svg>内で再利用可能な要素や属性を定義するための要素。
これ単体で何か描画されるわけではない。
利用するときは<defs>の子要素にid属性を付けて、参照する場所でurl(#id名)の形で指定する。

例

<svg width="400" height="400">
  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FFC107"/>
      <stop offset="100%" stop-color="#F44336"/>
    </linearGradient>
  </defs>
  <rect x="50" y="50" width="300" height="200" fill="url(#myGradient)"/>
</svg>

ユイト🍓

preserveAspectRatio

要素の配置の設定と拡大縮小か切り取るかの指定ができる。

preserveAspectRatio="<align> <meetOrSlice>"

meetがアスペクト比を維持し、コンテナ内に収まるように拡大縮小
sliceがアスペクト比を維持し、コンテナより溢れた場合切り取り
noneはアスペクト比が維持されないまま拡大縮小。歪んだり引き伸ばされた感じになる。

ユイト🍓

`<use>`

要素の再利用をする
xlink:hrefにidを指定して利用

例

黄色い星だけど、位置や大きさが異なる。

<svg viewBox="0 0 100 100">
  <defs>
    <!-- define a reusable symbol for a star shape -->
    <symbol id="star" viewBox="0 0 24 24">
      <path fill="yellow" d="M12,1.8L9.4,8.4L2.8,8.4L8.2,12.4L6.4,18.2L12,14.6L17.6,18.2L15.8,12.4L21.2,8.4L14.6,8.4L12,1.8Z" />
    </symbol>
  </defs>
  <!-- use the "star" symbol at position (20, 20) with width and height of 30 -->
  <use xlink:href="#star" x="20" y="20" width="30" height="30" />
  <!-- use the "star" symbol again at position (60, 60) with width and height of 20 -->
  <use xlink:href="#star" x="60" y="60" width="20" height="20" />
</svg>

ユイト🍓

`<polyline>と<polygon>`の違い

パスを閉じるか閉じないか
polylineはパスの始点と終点が閉じない（オープンパス）
polygonは閉じる（クローズパス）

例

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <polyline points="10,10 50,90 90,10" stroke="black" fill="none" />
  <polygon points="10,20 50,100 90,20" stroke="black" fill="none" />
</svg>

ユイト🍓

path要素面白い〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

<svg width="200" height="200">
  <path id="myPath" d="M50 50 C50 50, 75 25, 100 50 C100 50, 125 75, 150 50 C150 50, 175 25, 200 50" stroke="black" stroke-width="2" fill="none" />
  <circle id="myCircle" cx="50" cy="50" r="10" fill="red">
    <animateMotion dur="5s" repeatCount="indefinite">
      <mpath xlink:href="#myPath" />
    </animateMotion>
  </circle>
</svg>

ユイト🍓

fillとstrokeの違い

fillはシェイプの内側、strokeはシェイプの輪郭をコントロールする。

輪郭のみテキスト

<svg width="200" height="100">
  <text x="50" y="50" font-size="24" fill="none" stroke="black" stroke-width="1">Hello, world!</text>
</svg>

輪郭なしテキスト

<svg width="200" height="100">
  <text x="50" y="50" font-size="24" fill="#000" stroke="none" stroke-width="1">Hello, world!</text>
</svg>

ユイト🍓

グラデーション文字クリッピング

<svg viewBox="0 0 400 400">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="orange" />
      <stop offset="100%" stop-color="yellow" />
    </linearGradient>
  </defs>
  <defs>
    <clipPath id="text-clip" clipPathUnits="userSpaceOnUse">
      <text x="20" y="50" stroke-width="10px" style="font-size:24px">Gradient Text</text>
    </clipPath>
  </defs>
  <rect x="0" y="0" width="200" height="100" fill="url(#gradient)" clip-path="url(#text-clip)"/>
</svg>

ユイト🍓

SVGにおけるグラフィックスとは

SVG（Scalable Vector Graphics）において、グラフィックスとは、SVG画像に表示できる視覚的要素のことである。これらの要素には、基本的な図形（例：矩形、円、線）、テキスト、画像、パス、グラデーションなどが含まれます。SVGグラフィックスはベクトルベースであり、要素の形状や特性を記述する数式によって定義されています。そのため、SVGグラフィックは、解像度や鮮明さを失うことなく、あらゆるサイズに拡大縮小することができ、ウェブデザイン、デジタルアート、その他のビジュアルアプリケーションでの使用に理想的です。また、SVGグラフィックはプラットフォームに依存しないため、SVG規格をサポートするあらゆるデバイスやオペレーティングシステムで表示することができます。

ユイト🍓

マスキングとは

SVG において、マスクはパターンや画像を用いて要素の一部を選択的に隠したり、明らかにしたりするために用いられる技法である。マスクは、要素の不透明度を定義するために用いられる画像である。従来のクリッピング手法では不可能な、複雑な形状やパターンを作成するために使用することができます。

簡単に言うと、穴の開いた紙を想像してください。その紙を他の物体の上に置くと、その穴から下の物体が透けて見えるようになります。これは、SVGにおけるマスクの仕組みと似ています。マスクは、要素を透かして背景を見るための「穴」を定義する。

例えば、画像やテキストの特定の部分のみを表示したり、グラデーション効果を出したりするためにマスクを使用することができます。マスクでは、要素にマスクを適用すると、マスクと重なる部分だけが表示されるようになります。

SVG でマスクを作るには、<svg> 要素に "mask" という属性を持たせることができる。そして、<rect>要素や<circle>要素を用いてマスクの形状を定義することができる。また、<image>要素や<pattern>要素を用いて、マスクの内容を定義することができる。
全体として、マスキングはSVGの強力なツールであり、クリッピングだけでは難しいか不可能な複雑な形状やパターンを作成することが可能です

マスキングとは、画像やパターンを使って、要素の一部を選択的に表示したり隠したりする手法です。グレースケールまたはアルファチャンネルのマスクを使用します。マスクは要素に適用され、その透明度や色のプロパティを変更することができます。そのため、マスクは要素の一部を選択的に隠したり、SVG内の他の要素とブレンドしたりするために使用できる。

ユイト🍓

クリッピングとマスキングの違い

クリッピングは境界や形状を作り、その境界の外側にあるグラフィックの一部を「切り取る」ために使われる。これは clip-path 属性を用いて行われ、SVG ファイルまたは外部ファイルで定義された clipPath 要素を参照することができる。クリップパスで定義された境界の内側にあるグラフィックの部分のみが表示される。

一方、マスキングは、グラフィックの一部に透明度の高いマスクを適用するものです。マスクは任意の形状やパターンが可能であるため、グラフィックのどの部分が見えるかをより正確に制御することができる。マスクは mask 属性を用いて定義され、SVG ファイルまたは外部ファイルで定義されたマスク要素を参照することができる。

一般的に、クリッピングは単純な幾何学的形状や基本的なマスキングに使用され、マスキングはグラフィックの可視部分に対してより柔軟で制御が必要な、より複雑なマスキング操作に使用されます。

ユイト🍓

SMILとは

SMILとは、Synchronized Multimedia Integration Languageの略です。ウェブページのさまざまな部分を、ダンスや歌のように同時に動かしたり変化させたりする方法です。音楽家が楽器を演奏するタイミングを指示する指揮者や、ダンサーが体を動かすタイミングを指示する振付師のようなものだと考えてください。

ウェブページの中でSMILを使うと、絵やテキスト、動画が動いたり、色が変わったり、同時にいろいろなクールなことができるようになります。まるで、ウェブページの中でミニ映画を作るようなものです。

ユイト🍓

アニメーションとトランジションの違い

アニメーションとトランジションは、どちらもダイナミックなユーザーインターフェイスやビジュアルエクスペリエンスを実現するための重要なテクニックですが、その目的はそれぞれ異なります。

アニメーションとは、時間の経過とともに起こる動きや見た目の変化のことです。ページ上の特定の要素に注目させたり、ユーザーの操作に対してフィードバックを与えたり、あるいは単にインターフェイスに視覚的な面白さを加えるために使用されることがあります。アニメーションには、フェードインやスライドアウトのような単純なものから、キャラクターが画面を横切るような複雑な動きまで、さまざまなものがあります。

トランジションとは、インターフェイスのある状態やビューを別の状態やビューに変更するときに発生するエフェクトのことです。インターフェイスの異なる部分の間に連続性や滑らかさを生み出すのに役立ちます。トランジションは、情報の流れを示したり、階層性を持たせたり、ページに奥行きを持たせたりするために使用されます。

本質的に、アニメーションは動きと視覚的な面白さを、トランジションは滑らかさと連続性を重視しています。両者をうまく組み合わせることで、まとまりのある魅力的なユーザー体験を生み出すことができますが、適切かつ思慮深く使用することが重要です。

ユイト🍓

Webサイトにアニメーションやトランジションが必要だと考えられる理由

ユーザーの注意を引く：アニメーションは、ユーザーの注意を引き、ウェブサイトの特定のエリアに引きつけるために使用することができます。これは、ユーザーが見逃してしまうような重要な情報や機能を強調するために有効です。

フィードバックを提供する：アニメーションは、ユーザーがウェブサイト上の要素と相互作用する際に、視覚的なフィードバックを提供することができます。例えば、ボタンにカーソルを合わせると色が変わったり動いたりすることで、そのボタンがクリック可能であることを示し、インタラクションを促進することができます。

ユーザーを誘導する：トランジションは、異なる要素が互いにどのように関連しているかを示すことで、ウェブサイト内でユーザーを誘導するために使用することができます。例えば、ページの特定の部分をズームアウトして、それが全体のレイアウトにどのように適合しているかを示すトランジションは、ユーザーが情報の階層を理解するのに役立ちます。

ユーザビリティを高める：アニメーションやトランジションは、ユーザーがさまざまな要素を簡単に操作できるようにすることで、ウェブサイトの使いやすさを向上させます。例えば、ページ間をスムーズに遷移させることで、連続性を持たせ、ユーザーが混乱したり迷ったりするのを防ぐことができます。

視覚的な面白さを加える：アニメーションやトランジションは、ウェブサイトに視覚的な面白さを与え、ユーザーをより魅力的にすることができます。これは、ユーザーの注意を引きつけ、ウェブサイトをより長く探索するように促すのに有効です。

印象的な体験を生み出す：トランジションを上手に使って、他のウェブサイトとは一線を画す印象的な体験を提供することができます。これにより、ブランドの認知度を高め、ユーザーの再訪問を促すことができます。

全体として、アニメーションとトランジションは、ユーザーフレンドリーで魅力的なウェブサイトを作り、ポジティブなユーザーエクスペリエンスを提供するための重要なツールである。これらを適切かつ思慮深く使用することで、WebサイトデザイナーはWebサイトのユーザビリティとビジュアルアピールを高め、ユーザーにとって印象的な体験を提供することができます。

ユイト🍓

アニメーションの注意点

ウェブサイト上のすべての要素をアニメーション化すべきではありません。アニメーションを使いすぎると、かえって逆効果になり、ユーザー体験が乱雑になり、気が散ってしまうことがあります。むしろ、アニメーションは戦略的かつ選択的に使用し、ウェブサイトのユーザビリティとビジュアルアピールを向上させるべきです。どの要素をアニメーションさせるかを決める際には、以下の要素を考慮してください：

目的：アニメーションは明確な目的を持ち、重要な要素に注意を向けさせたり、ユーザーにフィードバックを与えるなど、特定の機能を果たすものであるべきです。明確な目的を持たないアニメーションは、不要である可能性が高く、ユーザーエクスペリエンスを損なう可能性があります。

ユーザーエクスペリエンス：アニメーションが全体的なユーザーエクスペリエンスにどのような影響を与えるかを検討します。使い勝手を向上させるのか、それとも混乱を招くのか。気が散るのか、それとも視覚的な面白さがあるのか。

パフォーマンスアニメーションは、特にモバイル機器や低速のインターネット接続環境では、ウェブサイトのパフォーマンスに影響を与える可能性があります。アニメーションの数が多すぎたり、複雑すぎたりすると、ウェブサイトの動作が遅くなり、応答性が悪くなります。

一貫性があること：アニメーションは、ウェブサイトの全体的なデザインと一貫性があり、場違いな感じや違和感がないようにする必要があります。また、ウェブサイトのさまざまなページやセクションで一貫性を持たせることで、まとまりのあるユーザーエクスペリエンスを実現します。

一般的に、アニメーションの使用は控えめにし、ユーザーエクスペリエンスに最も影響を与える主要な要素に焦点を当てるのがベストです。そうすることで、視覚的に魅力的でユーザーフレンドリーなウェブサイトを作ることができます。

ユイト🍓

サイトの世界観を伝えるためにアニメーションを利用することは効果的か？

アニメーションは、雰囲気やムードを演出したり、サイトの背景にあるブランドや組織の価値観や個性を伝えたりするために使用することができます。例えば、持続可能性や環境保護を訴えるサイトでは、自然の風景や野生動物のアニメーションを用いて、その価値観や世界観を表現することができます。また、テクノロジーやイノベーションをテーマとするサイトでは、未来的な都市や機械のアニメーションを用いて、進歩や革新の感覚を伝えることができるかもしれません。

ユイト🍓

svgのサイトギャラリー
https://www.awwwards.com/websites/svg/

ユイト🍓

スケーラブルとは

スケーラブルとは、システムやオブジェクトが、品質を落としたり、比率を歪めたりすることなく、そのサイズやスケールを変更できる能力のことを指します。つまり、鮮明さ、解像度、詳細度を維持したまま、オブジェクトを大きくしたり小さくしたりすることができる。デジタルメディアの場合、スケーラビリティは、画像、グラフィックス、その他の視覚的要素を、それぞれ独自の画面サイズ、解像度、アスペクト比を持つさまざまなデバイスやプラットフォームで表示できるようにするための重要な検討事項です。オブジェクトの拡大縮小が可能であれば、利用や共有が容易になり、閲覧環境にかかわらず見栄えが良くなります。

ユイト🍓

ベクターとは

ベクターとは、点、線、曲線などの幾何学的要素で定義された図形やオブジェクトを数学的に記述したものを指し、グラフィックスの文脈では、ベクターは、点、線、曲線、その他の幾何学的要素で定義されたものを指します。ピクセルで構成され、拡大・縮小するとピクセル化したりぼやけたりするラスターグラフィックスとは異なり、ベクターグラフィックスは品質や解像度を失うことなく拡大・縮小することができる。

ユイト🍓

グラフィックスとは

グラフィックスとは、情報を伝えたり、デザインの美観を高めたりするために使用される視覚的な要素や画像のことである。コンピューティングの文脈では、グラフィックはしばしばソフトウェアやプログラミング言語を用いて作成されたデジタル画像やアニメーションを指す。SVG では、グラフィックスには、ベクトルグラフィックスを使用して定義された形状、線、テキスト、およびその他の視覚的要素が含まれることがある。これらの要素は、動的でインタラクティブなビジュアルを作成するために、スタイル付け、変換、およびアニメーション化することができます。

ユイト🍓

SVGアニメーションについての投稿

ユイト🍓

SVGによく出る用語

オブジェクト
パス
アンカーポイント
バウンディングボックス

ユイト🍓

ベクターソフトでSVG作成する場合、アートボード一杯にする。
余計な余白が生まれるため

ユイト🍓

テキストをアウトライン化しないと、フォントがCSSのfont-familyに依存する。結果、作成したフォントと変わってしまう可能性がある

ユイト🍓

SVGのversion属性は非推奨？svg2.0以降は非推奨？

ユイト🍓

xmlns属性につけられているURLのようなものは名前空間と呼ばれる。
SVG内はXMLで表現する。
XMLは、タグ名を自由に決められる。
ブラウザ側に作成者のルールを伝えるために利用
XMLパーサーにxmlファイルであることを伝える

ユイト🍓

xmlns:xlinkは、名前空間の特例を作っている。

ユイト🍓

SVGをimg要素を介さないで、svgタグを使って記述する場合、
xml宣言は不要
名前空間も不要
viewbox属性が必須

ユイト🍓

viewBox属性は単純に横100px縦100pxという感じではない

index.html

<div class="l-container">
 <svg viewBox="0 0 1200 1200" >
   <rect  width="100" height="100" fill="#444"  />
 </svg>
</div>

style.css

.l-container {
  max-width: 500px;
  margin: 0 auto;
}

この場合、svgタグが親要素をはみ出して1200px✖️1200pxになるわけではなく、500pxの中に1200px✖️1200pxが敷き詰められている。解像度上がっている？

ユイト🍓

svgタグのwidthとheightの比率が異なる場合、preserveAspectRatio属性が影響sルウ

ユイト🍓

viewBoxのイメージは縦横の大きさを何等分するか

ユイト🍓

svgタグのwidthとviewBox属性を省略した場合、widthは300pxになる。
svgタグのwidthの初期値はauto。

ユイト🍓

svgタグのheightとviewBox属性を省略した場合、heightは150pxになる。
heightの初期値はauto。

ユイト🍓

viewBox属性の指定は縦横比の固定

このスクラップは2024/01/31にクローズされました

SVGとは

参考リンク

<svg>についている属性

x属性

xmlns属性

<defs>

例

preserveAspectRatio

<use>

例

<polyline>と<polygon>の違い

例

fillとstrokeの違い

輪郭のみテキスト

輪郭なしテキスト

SVGにおけるグラフィックスとは

マスキングとは

クリッピングとマスキングの違い

SMILとは

アニメーションとトランジションの違い

Webサイトにアニメーションやトランジションが必要だと考えられる理由

アニメーションの注意点

サイトの世界観を伝えるためにアニメーションを利用することは効果的か？

スケーラブルとは

ベクターとは

グラフィックスとは

SVGアニメーションについての投稿

`<svg>`についている属性

`<defs>`

`<use>`

`<polyline>と<polygon>`の違い