すべてのカテゴリ

ココナラに、web animationの制作で出品しました【一郎太・北山】と申します。北海道札幌市で、フリーランス・フォトグラファーとして長く活動しています。ふだんは、スチル撮影・動画撮影・動画制作で活動しています。今回、ココナラにweb animationの制作で出品しました。svg画像を使い、IllustratorとAfter Effectsを使用してwebにアニメーションを入れられるhtml形式のタグの制作をおこなっております。ホームページの中で、動きのあるものといえば、YouTubeの埋め込みが種になっておりますが、ワンポイントとして御社のロゴやキャラクターを動きのあるアニメーションとして埋め込むことができます。クライアント様からのご依頼の動きをできるだけ再現できるように、制作いたしますので、ご希望を詳しくお知らせください。作り直しも3回までおこないますので、ご納得のいくようなアニメーションを制作していきます。事前にどのような動きがご希望か、お知らせください。ざっくりとでもよろしいです。1回目にできあがったものをご覧いただき、修正点などがございましたら、ご遠慮なくお申し付けください。ご縁がありましたら、ぜひサービスのご相談をお願いいたします！

Google FontsのアイコンはPNGとSVGのダウンロードもできるので、今回はこちらを試してみたいと思います！Google Fontsのアイコンにアクセスhttps://　fonts.google.com/icons▼今回はAccount Circleというアイコンを使ってみます。Fillにチェックを入れて、Weight700にしてみます。▼使いたいアイコンをクリックすると、コードが出てきます。今回は右下にある、SVGとPNGというのを使ってみたいと思います。SVGとPNGをダウンロードそれぞれクリックしてダウンロードします。▼名前を変更してimgフォルダに入れてみました。SVGの方がサイズが若干軽いようです。html下記のように書いてみました。 <p>▼png</p>  <img src="img/account.png" alt="" />  <hr />  <p>▼svg</p>  <img src="img/account.svg" alt="" />⭐️hrとは区切り線のことです。⭐️CSSで背景に色をつけて、imgのサイズを少し大きめに指定してみました。▼ブラウザで確認。違いがわかりますでしょうか？PNGはドット絵になっていて拡大されるとギザギザに見えます。SVGはベクターデータなので拡大されても綺麗に見えます。【参考サイト】SVGとPNGの違いと使い分けhttps://　kinsta.com/jp/blog/svg-vs-png/CSSで色を変更！下記サイトを参考にCSS で

SVGファイルをアイコン等で使用する機会が増えました。実はテキストエディタで開けるファイル形式で、画像ファイルに見せかけて悪意のあるスクリプトを埋め込むことが可能です。自分で用意したSVGファイルが改ざんされるケースもあるでしょうが、そんなことができる環境は、おそらくサイトのPHPファイルが改ざんされてしまっているでしょう（※）。※特にWordPressを使用している場合、設置してあるサーバーのディレクトリ内に見慣れないファイルがあるか確認してみるべきです。既存のファイルでも、冒頭に以下のような記述があるかもしれません。<?php eval("lkxlxzcjlkvkcclkaldkfjls・・・（一見無意味な暗号化された文字）" ?>暗号をデコードしてやると、サイト乗っ取りや変なサイトにリダイレクトさせるコードだったりします。”検索エンジン経由のアクセスの場合は、ｘｘｘ（別のサイト）にリダイレクトする"といったコードが埋め込まれるケースが多発しています。あと、仮想通貨の発掘処理にサーバーが利用されるとか。サイト管理者は、自分のサイトにわざわざ検索サイト経由で来ないですよね。なので気づきにくいです。そして、SVGファイルが悪用されるケースとして、どこかから拾ってきたアイコン集とかです。もしかしたらブラウザ上では画像として表示されるかもしれません。でも、エディターで見ないと気づかない部分にコードが書かれてることが想定されます。というセキュリティーリスクを回避するために、SVGファイルをスクリプトとして実行しないような処置を施すことが大事です。ちなみにJoomla!（C

空気清浄機を紹介するウェブサイト向けに、設置ステップの説明画像と使用シーンを紹介する画像を制作しました。それぞれPC表示向けとスマホ表示向けの2サイズを制作しました。また納品にあたってはSVG形式にて対応させていただきました。[ポートフォリオ]https://coconala.com/mypage/user/portfolios