https://qwerty.work/tags/svg/ Recent content in SVG on qwerty.work Hugo -- gohugo.io ja-JP Mon, 25 Apr 2022 12:44:23 +0900 https://qwerty.work/post/2022/04/svg-aspect-ratio/ Mon, 25 Apr 2022 12:44:23 +0900 https://qwerty.work/post/2022/04/svg-aspect-ratio/ <h2 id="preserveaspectrationoneの追加でok">preserveAspectRatio=&ldquo;none&quot;の追加でOK </h2><p>SVGをレスポンシブで表示させる時にどうしても縦横比（アスペクト比）が固定されてしまい困り果てましたが、解決する方法が分かったのでメモ。</p> <h3 id="ソース例">ソース例 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;svg</span> <span style="color:#a6e22e">preserveAspectRatio=</span><span style="color:#e6db74">&#34;none&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/svg&gt;</span> </span></span></code></pre></div><p>たったこれだけでOKでした。あとはなどでSVGを囲んでCSSで調整するのみで解決できました。</p> <h2 id="参考ページ">参考ページ </h2> <div class="link-card"> <a href="https://aya404.com/blog/develop/337_svg-aspect/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://aya404.com/blog/develop/337_svg-aspect/" alt="https://aya404.com/blog/develop/337_svg-aspect/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://aya404.com/blog/develop/337_svg-aspect/</span> <span class="link-card-url">https://aya404.com/blog/develop/337_svg-aspect/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.design-memo.com/coding/object-fit-property" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.design-memo.com/coding/object-fit-property" alt="https://www.design-memo.com/coding/object-fit-property" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.design-memo.com/coding/object-fit-property</span> <span class="link-card-url">https://www.design-memo.com/coding/object-fit-property</span> </div> </a> </div> https://qwerty.work/post/2022/02/csss-svg-animation-sample/ Thu, 10 Feb 2022 09:31:06 +0900 https://qwerty.work/post/2022/02/csss-svg-animation-sample/ <h2 id="こういう背景ってどうやって作るんだろう">こういう背景ってどうやって作るんだろう？ </h2><p>以下のホームページに使われていた背景の動くバブルがいいな～と思いました。あと、フッターの波のような動きも。</p> <div class="link-card"> <a href="https://fukurou-labo.co.jp/recruit/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://fukurou-labo.co.jp/recruit/" alt="https://fukurou-labo.co.jp/recruit/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://fukurou-labo.co.jp/recruit/</span> <span class="link-card-url">https://fukurou-labo.co.jp/recruit/</span> </div> </a> </div> <p>「どうやってやってるのかな？」と、チャレンジしたくなり、方法を探したときにいろいろ見つけたのでメモ。</p> <h2 id="参考ページ">参考ページ </h2><h3 id="動くバブルみたいなやつはこれっぽい">動くバブルみたいなやつはこれっぽい？ </h3> <div class="link-card"> <a href="https://coco-factory.jp/ugokuweb/move02/5-3/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coco-factory.jp/ugokuweb/move02/5-3/" alt="https://coco-factory.jp/ugokuweb/move02/5-3/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coco-factory.jp/ugokuweb/move02/5-3/</span> <span class="link-card-url">https://coco-factory.jp/ugokuweb/move02/5-3/</span> </div> </a> </div> <h3 id="動く波はこれっぽい">動く波はこれっぽい？ </h3> <div class="link-card"> <a href="https://coco-factory.jp/ugokuweb/move02/5-13/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coco-factory.jp/ugokuweb/move02/5-13/" alt="https://coco-factory.jp/ugokuweb/move02/5-13/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coco-factory.jp/ugokuweb/move02/5-13/</span> <span class="link-card-url">https://coco-factory.jp/ugokuweb/move02/5-13/</span> </div> </a> </div> <div class="link-card"> <a href="http://kachibito.net/css/simple-css-waves-with-svg" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://kachibito.net/css/simple-css-waves-with-svg" alt="http://kachibito.net/css/simple-css-waves-with-svg" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://kachibito.net/css/simple-css-waves-with-svg</span> <span class="link-card-url">http://kachibito.net/css/simple-css-waves-with-svg</span> </div> </a> </div> <h4 id="静的ウェーブをオンラインで簡単に作れるサイト">静的ウェーブをオンラインで簡単に作れるサイト </h4> <div class="link-card"> <a href="https://www.shapedivider.app/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.shapedivider.app/" alt="https://www.shapedivider.app/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.shapedivider.app/</span> <span class="link-card-url">https://www.shapedivider.app/</span> </div> </a> </div> <h3 id="その他">その他 </h3> <div class="link-card"> <a href="https://deshinon.com/2019/03/06/koseiteki-haikei-css/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://deshinon.com/2019/03/06/koseiteki-haikei-css/" alt="https://deshinon.com/2019/03/06/koseiteki-haikei-css/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://deshinon.com/2019/03/06/koseiteki-haikei-css/</span> <span class="link-card-url">https://deshinon.com/2019/03/06/koseiteki-haikei-css/</span> </div> </a> </div> <div class="link-card"> <a href="https://webdesignfacts.net/entry/css-background-animation/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://webdesignfacts.net/entry/css-background-animation/" alt="https://webdesignfacts.net/entry/css-background-animation/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://webdesignfacts.net/entry/css-background-animation/</span> <span class="link-card-url">https://webdesignfacts.net/entry/css-background-animation/</span> </div> </a> </div> <div class="link-card"> <a href="https://web-navigator.blog/background-anime/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://web-navigator.blog/background-anime/" alt="https://web-navigator.blog/background-anime/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://web-navigator.blog/background-anime/</span> <span class="link-card-url">https://web-navigator.blog/background-anime/</span> </div> </a> </div> <div class="link-card"> <a href="https://goworkship.com/magazine/blob-animated-backgrounds/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/blob-animated-backgrounds/" alt="https://goworkship.com/magazine/blob-animated-backgrounds/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/blob-animated-backgrounds/</span> <span class="link-card-url">https://goworkship.com/magazine/blob-animated-backgrounds/</span> </div> </a> </div> <div class="link-card"> <a href="https://goworkship.com/magazine/liquid-effect-web/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/liquid-effect-web/" alt="https://goworkship.com/magazine/liquid-effect-web/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/liquid-effect-web/</span> <span class="link-card-url">https://goworkship.com/magazine/liquid-effect-web/</span> </div> </a> </div> <div class="link-card"> <a href="https://goworkship.com/magazine/glsl-shader-effect/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/glsl-shader-effect/" alt="https://goworkship.com/magazine/glsl-shader-effect/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/glsl-shader-effect/</span> <span class="link-card-url">https://goworkship.com/magazine/glsl-shader-effect/</span> </div> </a> </div> <h3 id="svgアニメーション">SVGアニメーション </h3> <div class="link-card"> <a href="https://b-risk.jp/blog/2017/06/svg-animation/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://b-risk.jp/blog/2017/06/svg-animation/" alt="https://b-risk.jp/blog/2017/06/svg-animation/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://b-risk.jp/blog/2017/06/svg-animation/</span> <span class="link-card-url">https://b-risk.jp/blog/2017/06/svg-animation/</span> </div> </a> </div> <h3 id="cssでマスクやアニメーションの参考">CSSでマスクやアニメーションの参考 </h3> <div class="link-card"> <a href="https://ics.media/entry/210701/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ics.media/entry/210701/" alt="https://ics.media/entry/210701/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ics.media/entry/210701/</span> <span class="link-card-url">https://ics.media/entry/210701/</span> </div> </a> </div> <h3 id="svgのストライプなどのパターンを作るサイト">SVGのストライプなどのパターンを作るサイト </h3> <div class="link-card"> <a href="https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration" alt="https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration</span> <span class="link-card-url">https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration</span> </div> </a> </div> <div class="link-card"> <a href="https://svg-pattern-maker.netlify.app/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://svg-pattern-maker.netlify.app/" alt="https://svg-pattern-maker.netlify.app/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://svg-pattern-maker.netlify.app/</span> <span class="link-card-url">https://svg-pattern-maker.netlify.app/</span> </div> </a> </div> <div class="link-card"> <a href="https://patterns.helloyes.dev/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://patterns.helloyes.dev/" alt="https://patterns.helloyes.dev/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://patterns.helloyes.dev/</span> <span class="link-card-url">https://patterns.helloyes.dev/</span> </div> </a> </div> https://qwerty.work/post/2022/02/favicon-generator-online/ Sat, 05 Feb 2022 15:41:44 +0900 https://qwerty.work/post/2022/02/favicon-generator-online/ <h2 id="オンライン変換サイト">オンライン変換サイト </h2><p>ファビコンにしたい画像をアップロードすると、オンラインで様々なサイズのFaviconに変換してくれます。設置に必要な site.webmanifest やHTMLのソースも合わせて提供してくれる便利なサイトです。</p> <h3 id="svgあり">SVGあり </h3><p>よく使っているのはこちらのサイト。あらゆる形式を全て網羅しているので重宝しています。</p> <div class="link-card"> <a href="https://realfavicongenerator.net/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://realfavicongenerator.net/" alt="https://realfavicongenerator.net/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://realfavicongenerator.net/</span> <span class="link-card-url">https://realfavicongenerator.net/</span> </div> </a> </div> <h3 id="svgなし">SVGなし </h3> <div class="link-card"> <a href="https://favicon.io/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://favicon.io/" alt="https://favicon.io/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://favicon.io/</span> <span class="link-card-url">https://favicon.io/</span> </div> </a> </div> <div class="link-card"> <a href="https://ao-system.net/favicongenerator/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ao-system.net/favicongenerator/" alt="https://ao-system.net/favicongenerator/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ao-system.net/favicongenerator/</span> <span class="link-card-url">https://ao-system.net/favicongenerator/</span> </div> </a> </div> <div class="link-card"> <a href="https://iconifier.net/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://iconifier.net/" alt="https://iconifier.net/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://iconifier.net/</span> <span class="link-card-url">https://iconifier.net/</span> </div> </a> </div>