この記事は最終更新日から1年以上経過しています。
faviconにsvgを埋め込むジェネレーター
公開日：
更新日：
こんにちは。田村です。
faviconにsvgを表示したい場合に使えるジェネレーターを作成しました。
- 改行・余白の削除: .replace(/\s*\n\s*/g, '')でSVG全体を一行に整形。
- エンコード: "を%22に、をそれぞれ%3Cと%3Eに変換。
プレビュー:
HTMLテーブルから属性を削除するツール
こんにちは。田村です。 tableのclass, id, style属性を削除してシンプルなHTMLに整形するツールを作成しました。 変換 プレビュー: #preview { width: 100%; min-height: 400px; margin-top: 40px; background-color: var(--var-color-status-disabled); } function removeAttributes() { const htmlInput = document.getElementById('htmlInput').value; const parser = new DOMParser(); const doc = parser.parseFromString(htmlInput, 'text/html'); // すべての要素から class, id, style 属性を削除 const elements = doc.querySelectorAll('*'); elements.forEach(el => { el.removeAttribute('class'); el.removeAttribute('id'); el.removeAttribute('style'); }); // 不要なxmlns属性を含まないようにbodyのinnerHTMLを直接取得 const outputHTML = doc.body.innerHTML; const output = document.getElementById('output'); output.value = outputHTML; output.focus(); output.select(); // テキストを選択状態にする document.getElementById('preview').innerHTML = outputHTML; }
スタッフブログ
SVGからマルチバイトのidとdata-nameをとるツール
こんにちは。田村です。 SVGをちょっと整形するツールを作成しました。 idとdata-nameがマルチバイトの場合削除します。 変換 プレビュー: #preview { width: 100%; height: 400px; margin-top: 40px; background-color: var(--var-color-status-disabled); } function removeAttributes() { const svgInput = document.getElementById('svgInput').value; const parser = new DOMParser(); const doc = parser.parseFromString(svgInput, 'image/svg+xml'); const elements = doc.querySelectorAll('[id], [data-name]'); elements.forEach(el => { const idValue = el.getAttribute('id'); const dataNameValue = el.getAttribute('data-name'); // マルチバイト文字を含むかどうかをチェックする関数 const containsMultibyte = (str) => { for (let char of str) { if (char.charCodeAt(0) > 255) { return true; } } return false; }; // 'id'属性がマルチバイト文字を含む場合は削除 if (idValue && containsMultibyte(idValue)) { el.removeAttribute('id'); } // 'data-name'属性がマルチバイト文字を含む場合は削除 if (dataNameValue && containsMultibyte(dataNameValue)) { el.removeAttribute('data-name'); } }); const serializer = new XMLSerializer(); const outputSVG = serializer.serializeToString(doc.documentElement); const output = document.getElementById('output'); output.value = outputSVG; output.focus(); output.select(); // テキストを選択状態にする document.getElementById('preview').innerHTML = outputSVG; }
スタッフブログ