SVG

概要：SVGの文書構造 プレゼンテーション スタイルをつける SVGがマイブーム？ SVGのスタイル どれを使うか 概要：SVGの文書構造 プレゼンテーション スタイルをつける いまさらのSVG。まずは便利なライブラリは使わず、できる限り生SVGで試していくつもり。スタイルの設定方法について書いた。 SVGがマイブーム？ なぜか今、SVGが自分の旬だったりしてるので備忘録？としてまとめています。 SVGのスタイル SVGはXML言語のひとつなので、構造とプレゼンテーションは分けるのが正解。 プレゼンテーションとは視覚的な提示方法、修飾のこと。 SVGにスタイルをつける方法にはいくつかあります。…

vite-plugin-svgr プラグインがアップデートされ設定などが変わっていたので改めてメモ 環境 vite-plugin-svgr 4.2.0 Vite 4.4.9 TypeScript 5.1.6 vite-plugin-svgr v3 → v4 結論は最下部にあります。お急ぎの方は途中スキップしてください！ Before プラグインの設定 vite.config.ts import svgr from 'vite-plugin-svgr'; export default { // ... plugins: [svgr()], } TypeScript に SVG を React C…

概要：SVGの本 ２回め入手する 紹介本を自分で買う 本を活用してよりSVGを理解しよう 概要：SVGの本 ２回め入手する SVGの解説本を時を経て２冊めを買った、おまぬけなお話 紹介本を自分で買う 前回にリンクを設置していたSVGエッセンシャルズ、自分も入手しました。 最近の本ではないので、あまり本の状態は期待していませんでしたが、 帯も付いていて透明シュリンクもされていて、たいへんきれいな本が届きました。 どのみちカバーをはずして読みますが、気持ちうれしいです。 www.w3.org developer.mozilla.org 本を活用してよりSVGを理解しよう SVGについては、以上のリ…

概要：SVGアニメーションを求めたらCSS？ まずはネットで検索？ 生SVG？ ライブラリもあることはある 概要：SVGアニメーションを求めたらCSS？ SVGに興味がわいて、今どきだとやはりアニメーション。SVGでアニメーションをする方法を探します。 まずはネットで検索？ SVGアニメーションを求めて、検索していますが、これがなかなか見つからないのです。 SVGアニメーションで検索にヒットしてくる大半が、実のところ、CSSアニメーションだったりするのです。 いや別に間違っていないのです。 SVG画像をCSSのanimationプロパティでアニメーションさせるので、SVGアニメーション、それで…

みなさんのサイトでは、faviconを設定されていますか。 favorite icon、ファビコンで通じるようです。 ここ、はてなブログでは、ペン先のファビコンが用いられています。 設定しておけば、ブックマークに表示されます。 favorite icon ＝ お気に入りアイコンですから当然ですね。 サイトのオリジナル性も増し、ブランドイメージにも寄与するでしょう。 設定方法 通常は、拡張子をicoにして専用に画像を作成する手間が必要です。 その方法でも簡単に作成できますが、SVGでも可能です。 SVGですので小さくてもかなり鮮明に表示されます。 <link rel="icon" type="i…

svgを色変えたりしたい場合、imgタグの読み込みではfill設定できないのでsvgをコードで埋め込んでfillの値を変えて色を変える…とかやってきたけど、いまはIEを気にしないでよいのであればimgタグで読み込んだ上でmask-imageでできるじゃん、というツイートを最近見て、あああたしかに！！となり。 zenn.dev developer.mozilla.org background-colorに色を指定して、mask-imageでsvgを読み込めばsvgに色がつく（＝実際はsvgのかたちで切り抜いていて、実質そういうふうに見える）

はじめに PlantUMLのPDF出力エラーと解決方法 InkscapeでSVGをPDF指定でエクスポートする Mac Linux SVGをPDF指定でエクスポートする方法 その他指定 まとめ はじめに 私はVSCodeの拡張機能でPlantUMLを使用しています。 作成した.pumlファイルはPNGやSVGにエクスポート(PlantUML: Export Current Diagram)できるため、プロジェクトではコードとセットでコミットしています。 大抵はPNGとSVGをエクスポートできれば十分なのですが、PDFもエクスポートしたいことがありました。しかし、うまくいきませんでした。 これは…

年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co さらにCodyHouse Framework 本体のデータも必要なのでgithubからダウンロードしておきましょう。github.com <div class="cd-timeline js-cd-timeline"> <div class="container max-width-lg cd-timeline__co…

情報を得る為に Facebookをよく使う。X(旧Twitter)やInstagramよりも県民が多く使うので それまで使ってなかったが帰ってきてからはチェックしている。 県内では珍しい あご出汁(飛び魚)のラーメンが食べられるという情報が入ったので調べてみると 鶏そばカヲルや うどんの美味しい空海のすぐ近くでサラリーマン達がお昼ご飯を食べるランチの激戦区。 中に入ってみると カウンター席の定食屋さんみたいな雰囲気。豚骨ラーメンや中華そばも メニューにあるが狙いはあご出汁塩ラーメン。 昼はラーメン夜は居酒屋という感じだろうか？ お酒がずらりと並び ツマミのメニューが黒板に書き込まれている。 閉…

easy-thumbnailsというPythonライブラリのエラー調査をしたので備忘録 InvalidImageFormatErrorが発生したら easy-thumbnailsでは、画像読み込み時のエラーを丸めてInvalidImageErrorというエラーとして送出します。 このエラーが発生した場合は、easy-thumbnailsの画像を読み込む関数source_generators.pil_image()に直接画像を渡してみると、実際に発生しているエラーのスタックトレースを確認できます。 >>> from easy_thumbnails.source_generators import…

自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。 「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。 note.com html htmlの授業ではHTML Living Standardの仕様に基づき様々な要素の使い方を学びました。HTMLはマークアップ言語であり文書構造を示す物です。header要素やnav要素、section要素といった要素を使用する事で、明示的に文書構造を示すことが出来るようになりました。h1~h6を使用し、適切な見出しの…

Play Framework 3.0.x (以下、Play) を始めたばかりの方向けに、サンプルを進めるうえで困ったところを共有する目的で書いています。 過去のPlay Framework 2.8.x とAkka Typed を使ったServer-Sent Events (以下、SSE) を、Apache Pekko (以下、Pekko) に変更したものです。 以下、目次 やりたいこと 見た目 設計のポイント 実装してみて やりたいこと Playインスタンス1 (localhost:9000) にアクセスしたクライアントが、サーバーより受け取るメッセージを、Playインスタンス2(localh…

Webデザイナーとして活躍するためには、HTMLコーディングのスキルは不可欠です。本記事では、WEBデザイナーの方々に向けて、HTMLコーディングの練習におけるポイントを徹底解説します。以下は、この記事で取り上げるポイントを示した目次です。 1. **HTMLコーディングの基礎を理解しよう** - HTMLの基本構造とタグの使い方 - セマンティックなHTMLの重要性 2. **HTML5の新機能を活用したコーディングテクニック** - 新しいセクション要素やフォーム要素の活用方法 - CanvasやVideoなどのマルチメディア要素の使い方 3. **SEO対策に役立つHTMLタグの使い方*…

以前書いたsatori/sharp/satori-htmlでOG画像生成を使ってたら、 やたらsatori-htmlの処理に時間がかかるので、 いろいろ調べてみたときの備忘録(*´ω｀*) unjs/nitro+satori+sharpで動的OGP画像を自動生成する - くらげになりたい。 使ってるのは前回と同じ、この3つ vercel/satori ... ReactNode(VNode)をSVGに変換 lovell/sharp ... SVGをPNGに変換 natemoo-re/satori-html ... HTMLをVNodeに変換 遅かったときのコード 最初はこんな感じで、 いくつか…

以前にBlender4.1はSVGやOBJ等のファイルを3Dビューポートに直接読み込めるようになったという記事を書いた筆者のK06です。 こんにちは。 以前の記事が読みたい場合は下記リンクより読むことができます。 https://k06.hatenablog.com/entry/2024/04/03/180614 今回はBlender4.1にドラッグアンドドロップしたSVGとファイルのインポートからインポートした時で挙動が違うということをご紹介したいと思います。 ドラッグアンドドロップした時の挙動 メニューから読み込んだ時の挙動 ドラッグアンドドロップした時の挙動 今回は2つの方法でSVGを読…

パソコンやスマホで、音楽にあわせて絵や写真がおどる動画の作り方を解説します。いらすとやを動かす方法はこちら。ダンス動画の作り方はこちら。音声合成はこちら。 ほかの解説動画はこちら。 内容： １．9VAeきゅうべえのダウンロード ２．サンプルリミックスを保存 ３．キャラクタを新しいファイルに保存 ４．音楽ファイルを入れる ５．アニメキャストを開く ６．キャラクタを画像に変更 ７．アニメキャストをサイズ変更 ８．アニメキャストのローマ字を変更 ９．速く切り替える 10．アニメキャストにラベルをつける 11．ローマ字ラベルを「X」に変更 12．長い音楽にあわせる方法 13．動画出力 歌詞動画の例 d…

MICS-OPCAB-３（RITA-LAD, LITA-OM, LITA-SVG-PD）ボス執刀 SVG採取。 OPCAB-3(LITA-LAD, Ao-SVG-OM, SVG-PD) ボス執刀 MICS OPCAB終わった後に、次はIMA採ってねって言われたから、昼休みにIMA採取のyoutube見てイメージトレーニング。オペ室行くと、看護師さんが開胸してIMA採ってっていうので、看護師さん前立に手術開始。皮膚切開の時から出血がすごい。うーん。なんだか嫌な予感。IMA採取しているときも骨やら組織やらから出血がすごくてなかなかIMAに集中できない。採り始める前からコントロールすべきなんだろうけ…

今日はレジデントがカンファで発表するからと。特にcongenitalになると全く分からんから頼りになる。レジデントへの教育もあってかなり長引いたけど。 OPCAB-5 (LITA-LAD, Ao-SVG-Dg, -SVG-OM1, -SVG-OM2, -SVG-RCA) ボス執刀 SVG採取していたら、ボスから何してるんだ？この症例は開胸してIMA採るのが先だろと。うん？俺が採っていいってことか？よくわからんけど、こっち来いって言われたから開胸してIMA採取。この前injuryして以来。めちゃくちゃ緊張した。手が震えまくってやばかった。今日は45分くらいかかった。とりあえず出血もなくinjur…

概要 試す ホストでheadless chromeを動かしてDockerコンテナからchromeを参照するパターン headless chromeをDockerで動かして別のDockerコンテナからchromeを参照するパターン 概要 wappalyzerという技術情報を調べることができるpuppeteerに依存したライブラリを使わざるをえない状況でpuppetterに入門したのでメモに残す。 環境は以下の通り。 docker info Client: Docker Engine - Community Version: 26.0.0 Context: default Debug Mode: …