【コピペOK】SVG楽譜部品集：調号譜例（高音部譜表）

このページでは、SVG (Scalable Vector Graphics) を用いて作成された、楽典用の簡易譜例用部品を紹介します。

Gラボで紹介されているコードは、ご自身のウェブサイトやアプリケーションで自由にご利用（コピー＆ペースト）いただけます。

各楽譜SVGを利用する際は、SVG定義要素のコードをHTMLのどこかに必ず挿入してください。

SVG楽譜部品集とは
SVG定義要素 (defs)
調号レシピ(use)
まとめ

SVG楽譜部品集とは

特徴

拡大・縮小に強い：SVGはベクター形式のため、どんなサイズでも劣化せずキレイです。
軽量：画像ファイルと異なり、テキストデータなので読み込みが速いです。
カスタマイズ可能：CSSで色や線の太さを変更できます。

使い方

`<defs>`要素（定義要素）をHTMLのどこかに一度記述します。部品を再利用するために必ず挿入してください。
`<use>`タグで呼び出して使います。
アクセシビリティを設定（このSVGを囲むブロック要素にaria-label 属性、SVG内にaria-label、aria-labelledby、title、desc 属性などの設定を推奨します）

// aria-labelledbyの使用例（推奨）
<svg role="img" aria-labelledby="titleId descId"><title id="titleId">ここにタイトル</title><desc id="descId">ここに詳細</desc>...</svg>

// aria-labelの使用例
<svg role="img" aria-label="ここにSVGの説明">...</svg>

// divで囲む例
<div role="group" aria-label="ここにSVGの説明">
  <svg aria-hidden="true">...</svg>
  <svg aria-hidden="true">...</svg>
</div>

SVG楽譜部品集リンク

基本設計

基本設計の解説（近日公開予定）
defsの詳細解説（近日公開予定）

楽典用の譜例レシピ

音部記号・譜表（近日公開予定）
調号（近日公開予定）
単音（近日公開予定）
音階（近日公開予定）
和音（近日公開予定）

その他

簡易楽譜（近日公開予定）

SVG定義要素 (defs)

このブロックは、シャープや五線譜など、すべての部品が参照する元データです。HTMLのどこかに必ず挿入してください。

コード

<svg style="position:absolute;width:0;height:0" aria-hidden="true" id="svgDefs">
    <defs>
        <path id="oneLineStaff" d="M 1 -4.8 L 0 -4.8 L 0 4.8 L 1 4.8 L 1 -4.8 Z" />
        <g id="fiveLineStaff">
            <use href="#oneLineStaff" x="0" y="0" />
            <use href="#oneLineStaff" x="0" y="100" />
            <use href="#oneLineStaff" x="0" y="200" />
            <use href="#oneLineStaff" x="0" y="300" />
            <use href="#oneLineStaff" x="0" y="400" />
        </g>
        <!-- Barline -->
        <g id="singleBarline">
            <path transform="scale(0.4) translate(-145,0)" d="M 0 1000 L 0 0 L 37 0 L 37 1000 L 0 1000 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <g id="doubleBarline">
            <path transform="scale(0.4) translate(-145,0)"
                d="M 0 1000 L 0 0 L 37 0 L 37 1000 L 0 1000 Z M 110 1000 L 110 0 L 147 0 L 147 1000 L 110 1000 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <g id="finalBarline">
            <path transform="scale(0.4) translate(-255,0)"
                d="M 110 1000 L 110 0 L 258 0 L 258 1000 L 110 1000 Z M 0 1000 L 0 0 L 37 0 L 37 1000 L 0 1000 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <!-- Clef -->
        <g id="gClef">
            <path transform="scale(0.4) translate(-0,-1080)"
                d="M 322.006 668 L 357.006 836 Q 372.006 834 382.006 833 Q 392.006 832 397.006 832 Q 458.006 832 506.006 866.5 Q 554.006 901 582.506 957 Q 611.006 1013 611.006 1080 Q 611.006 1157 571.506 1218.5 Q 532.006 1280 453.006 1309 Q 458.006 1326 482.006 1451 Q 488.006 1481 491.006 1498.5 Q 494.006 1516 495.006 1529 Q 496.006 1542 496.006 1559 Q 496.006 1609 471.506 1648.5 Q 447.006 1688 405.506 1710 Q 364.006 1732 313.006 1732 Q 261.006 1732 221.006 1712.5 Q 181.006 1693 158.006 1658.5 Q 135.006 1624 135.006 1579 Q 135.006 1531 161.506 1499 Q 188.006 1467 237.006 1467 Q 279.006 1467 305.506 1497.5 Q 332.006 1528 332.006 1570 Q 332.006 1606 307.006 1633 Q 282.006 1660 242.006 1660 L 232.006 1660 Q 258.006 1699 314.006 1699 Q 383.006 1699 422.006 1654 Q 461.006 1609 461.006 1539 Q 461.006 1522 457.006 1493.5 Q 453.006 1465 443.006 1425 Q 433.006 1385 427.506 1359 Q 422.006 1333 420.006 1322 Q 386.006 1332 340.006 1332 Q 254.006 1332 172.006 1282 Q 92.006 1232 46.006 1150 Q 0.006 1068 0.006 973 Q 0.006 883 41.006 804 Q 82.006 725 142.506 659 Q 203.006 593 264.006 533 Q 250.006 480 241.006 428 Q 232.006 376 232.006 322 Q 232.006 275 238.506 233.5 Q 245.006 192 257.006 157 Q 270.006 117 291.006 81.5 Q 312.006 46 335.506 23 Q 359.006 0 377.006 0 Q 401.006 0 443.006 85 Q 464.006 128 474.006 178 Q 484.006 228 484.006 285 Q 484.006 356 465.006 426.5 Q 446.006 497 409.506 559 Q 373.006 621 322.006 668 Z M 414.006 1289 L 348.006 955 Q 321.006 961 297.006 980.5 Q 273.006 1000 258.506 1027.5 Q 244.006 1055 244.006 1086 Q 244.006 1111 257.006 1137.5 Q 270.006 1164 289.006 1180 Q 302.006 1192 315.006 1198 Q 330.006 1205 330.006 1211 Q 330.006 1214 320.006 1217 Q 282.006 1208 251.506 1183 Q 221.006 1158 203.506 1122.5 Q 186.006 1087 186.006 1047 Q 186.006 1004 203.506 964 Q 221.006 924 252.506 892 Q 284.006 860 324.006 844 L 295.006 693 Q 179.006 787 124.506 877.5 Q 70.006 968 70.006 1057 Q 70.006 1122 104.006 1178 Q 138.006 1234 197.006 1268.5 Q 256.006 1303 330.006 1303 Q 350.006 1303 370.506 1299 Q 391.006 1295 414.006 1289 Z M 291.006 508 Q 314.006 496 340.006 463.5 Q 366.006 431 390.006 389 Q 414.006 347 429.006 304.5 Q 444.006 262 444.006 228 Q 444.006 192 433.006 171 Q 422.006 150 395.006 150 Q 371.006 150 348.506 172 Q 326.006 194 308.506 230.5 Q 291.006 267 281.006 312 Q 271.006 357 271.006 404 Q 271.006 436 277.506 462 Q 284.006 488 291.006 508 Z M 379.006 951 L 445.006 1279 Q 543.006 1237 543.006 1107 Q 543.006 1064 521.006 1028.5 Q 499.006 993 462.006 972 Q 425.006 951 379.006 951 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <g id="fClef">
            <path transform="scale(0.4) translate(-0,-250)"
                d="M 7 799.006 L 0 777.006 Q 166 669.006 238 599.006 Q 286 552.006 323 491.506 Q 360 431.006 381.5 364.006 Q 403 297.006 403 231.006 Q 403 172.006 385 126.506 Q 367 81.006 333 55.006 Q 299 29.006 252 29.006 Q 234 29.006 214.5 33.006 Q 195 37.006 174 45.006 Q 131 61.006 108 86.506 Q 85 112.006 85 135.006 Q 85 144.006 93 148.006 Q 101 152.006 108 152.006 Q 118 152.006 133 148.006 Q 140 146.006 146.5 145.006 Q 153 144.006 160 144.006 Q 198 144.006 222 166.506 Q 246 189.006 246 226.006 Q 246 262.006 216 288.006 Q 186 314.006 145 314.006 Q 96 314.006 61 283.006 Q 26 252.006 26 203.006 Q 26 144.006 59 98.006 Q 92 52.006 148.5 26.006 Q 205 0.006 274 0.006 Q 350 0.006 410 33.006 Q 470 66.006 505.5 123.506 Q 541 181.006 541 254.006 Q 541 349.006 488 436.006 Q 461 481.006 426.5 521.006 Q 392 561.006 339 602.506 Q 286 644.006 206 692.006 Q 126 740.006 7 799.006 Z M 637 91.006 Q 660 91.006 676 107.006 Q 692 123.006 692 146.006 Q 692 169.006 676 184.506 Q 660 200.006 637 200.006 Q 614 200.006 598 184.506 Q 582 169.006 582 146.006 Q 582 123.006 598 107.006 Q 614 91.006 637 91.006 Z M 637 311.006 Q 660 311.006 676 327.006 Q 692 343.006 692 366.006 Q 692 389.006 676 404.506 Q 660 420.006 637 420.006 Q 614 420.006 598 404.506 Q 582 389.006 582 366.006 Q 582 343.006 598 327.006 Q 614 311.006 637 311.006 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <g id="cClef">
            <path transform="scale(0.4) translate(-0,-500)"
                d="M 213 1012.007 L 176 1012.007 L 176 12.007 L 213 12.007 L 213 502.007 Q 231 493.007 251 466.007 Q 271 439.007 289 403.507 Q 307 368.007 320 332.507 Q 333 297.007 336 270.007 Q 346 339.007 377 378.507 Q 408 418.007 453 418.007 Q 498 418.007 520 381.007 Q 543 344.007 543 237.007 Q 543 194.007 540.5 163.507 Q 538 133.007 532 114.007 Q 519 70.007 491 51.507 Q 463 33.007 420 33.007 Q 397 33.007 384 42.507 Q 371 52.007 371 61.007 Q 371 68.007 378 78.007 Q 385 88.007 393 98.007 Q 410 118.007 410 135.007 Q 410 159.007 392.5 178.507 Q 375 198.007 342 198.007 Q 312 198.007 292.5 176.507 Q 273 155.007 273 125.007 Q 273 88.007 297.5 60.007 Q 322 32.007 361.5 16.007 Q 401 0.007 447 0.007 Q 511 0.007 562 30.007 Q 613 60.007 643.5 113.007 Q 674 166.007 674 235.007 Q 674 278.007 664.5 314.007 Q 655 350.007 635 379.007 Q 608 417.007 566 438.507 Q 524 460.007 477 460.007 Q 455 460.007 431.5 454.507 Q 408 449.007 387 438.007 L 340 512.007 L 387 586.007 Q 410 577.007 434 572.007 Q 458 567.007 482 567.007 Q 537 567.007 580.5 598.007 Q 624 629.007 649 680.007 Q 674 731.007 674 793.007 Q 674 855.007 644 907.507 Q 614 960.007 563 991.007 Q 512 1022.007 447 1022.007 Q 363 1022.007 318 988.507 Q 273 955.007 273 897.007 Q 273 867.007 292.5 845.507 Q 312 824.007 342 824.007 Q 375 824.007 392.5 843.507 Q 410 863.007 410 887.007 Q 410 906.007 393 924.007 Q 384 934.007 377.5 943.007 Q 371 952.007 371 960.007 Q 371 972.007 384 980.507 Q 397 989.007 420 989.007 Q 482 989.007 513.5 943.507 Q 545 898.007 545 793.007 Q 545 701.007 524 653.507 Q 503 606.007 453 606.007 Q 407 606.007 377 645.007 Q 347 684.007 338 752.007 Q 329 703.007 310 657.007 Q 291 611.007 266 575.007 Q 241 539.007 213 520.007 L 213 1012.007 Z M 117 1012.007 L 0 1012.007 L 0 12.007 L 117 12.007 L 117 1012.007 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <g id="trebleClef">
            <use href="#gClef" x="0" y="300" />
        </g>
        <g id="sopranoClef">
            <use href="#cClef" x="0" y="400" />
        </g>
        <g id="mezzoSopranoClef">
            <use href="#cClef" x="0" y="300" />
        </g>
        <g id="altoClef">
            <use href="#cClef" x="0" y="200" />
        </g>
        <g id="tenorClef">
            <use href="#cClef" x="0" y="100" />
        </g>
        <g id="baritoneClef">
            <use href="#cClef" x="0" y="000" />
        </g>
        <g id="bassClef">
            <use href="#fClef" x="0" y="100" />
        </g>
        <!-- Note -->
        <g id="wholeNote">
            <path transform="scale(0.4, 0.4) translate(-207, -126)"
                d="M 0.002 125.003 Q 0.002 88.003 27.002 60.003 Q 54.002 32.003 100.502 16.003 Q 147.002 0.003 203.002 0.003 Q 260.002 0.003 308.002 15.503 Q 356.002 31.003 385.002 59.003 Q 414.002 87.003 414.002 125.003 Q 414.002 164.003 386.002 192.503 Q 358.002 221.003 311.502 236.503 Q 265.002 252.003 209.002 252.003 Q 153.002 252.003 105.502 237.003 Q 58.002 222.003 29.002 193.503 Q 0.002 165.003 0.002 125.003 Z M 230.002 232.003 Q 264.002 232.003 276.502 207.003 Q 289.002 182.003 289.002 148.003 Q 289.002 113.003 274.502 84.003 Q 260.002 55.003 236.002 37.503 Q 212.002 20.003 182.002 20.003 Q 148.002 20.003 136.502 45.003 Q 125.002 70.003 125.002 104.003 Q 125.002 138.003 139.002 167.003 Q 153.002 196.003 176.502 214.003 Q 200.002 232.003 230.002 232.003 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <!-- Accid -->
        <g id="doubleSharp">
            <path transform="scale(0.4) translate(-260, -131)"
                d="M 260 262 L 174 262 L 174 217 Q 174 198 161.5 187 Q 149 176 131 176 Q 112 176 99 187 Q 86 198 86 215 L 86 262 L 0 262 L 0 176 L 55 176 Q 69 176 77.5 162 Q 86 148 86 131 Q 86 115 76.5 100.5 Q 67 86 61 86 L 0 86 L 0 0 L 86 0 L 86 53 Q 86 67 99 76.5 Q 112 86 131 86 Q 146 86 160 77 Q 174 68 174 55 L 174 0 L 260 0 L 260 86 L 209 86 Q 196 86 185 101.5 Q 174 117 174 131 Q 174 148 183.5 162 Q 193 176 209 176 L 260 176 L 260 262 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <g id="sharp">
            <path transform="scale(0.4) translate(-225, -378)"
                d="M 0 477 L 47 463 L 47 320 L 0 332 L 0 232 L 47 219 L 47 23 L 78 23 L 78 211 L 145 195 L 145 0 L 176 0 L 176 187 L 225 176 L 225 275 L 176 289 L 176 432 L 225 420 L 225 523 L 176 535 L 176 723 L 145 723 L 145 543 L 78 561 L 78 756 L 47 756 L 47 568 L 0 580 L 0 477 Z M 78 455 L 145 439 L 145 295 L 78 312 L 78 455 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <g id="natural">
            <path transform="scale(0.4) translate(-175, -353.5)"
                d="M 33 207 L 176 170 L 176 707 L 145 707 L 145 495 L 0 532 L 0 0 L 33 0 L 33 207 Z M 31 430 L 147 402 L 147 274 L 31 303 L 31 430 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <g id="flat">
            <path transform="scale(0.4) translate(-200, -475)"
                d="M 0 670 L 0 0 L 31 0 L 31 390 Q 68 353 115 353 Q 147 353 173 374.5 Q 199 396 199 437 Q 199 469 180 496 Q 161 523 129 550 L 60 609 Q 41 625 26 640.5 Q 11 656 0 670 Z M 31 435 L 31 603 Q 57 575 75 551.5 Q 93 528 103 510 Q 114 491 119.5 475 Q 125 459 125 445 Q 125 417 112 404.5 Q 99 392 84 392 Q 68 392 52.5 403.5 Q 37 415 31 435 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <g id="doubleFlat">
            <path transform="scale(0.4) translate(-370, -475)"
                d="M 168 670 L 168 508 Q 160 520 142.5 537 Q 125 554 97 576 Q 42 619 0 670 L 0 0 L 29 0 L 29 390 Q 75 353 113 353 Q 145 353 168 373 L 168 0 L 199 0 L 199 390 Q 236 353 283 353 Q 315 353 341 374.5 Q 367 396 367 437 Q 367 469 348 496 Q 329 523 297 550 L 228 609 Q 189 643 168 670 Z M 199 435 L 199 603 Q 239 561 266 519.5 Q 293 478 293 445 Q 293 417 280 404.5 Q 267 392 252 392 Q 236 392 220.5 403.5 Q 205 415 199 435 Z M 29 435 L 29 603 L 70 556 Q 99 523 111 498 Q 123 473 123 445 Q 123 394 82 394 Q 66 394 50.5 405.5 Q 35 417 29 435 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <!-- LedgerLine -->
        <g id="ledgerLine">
            <path transform="translate(-100, -0)" d="M 200 -4.8 L 0 -4.8 L 0 4.8 L 200 4.8 L 200 -4.8 Z"
                vector-effect="non-scaling-stroke" />
        </g>
        <!-- Keysig -->
        <g id="keysig0"></g>
        <g id="keysig1s">
            <use href="#sharp" x="000" y="000" />
        </g>
        <g id="keysig2s">
            <use href="#sharp" x="000" y="000" />
            <use href="#sharp" x="100" y="150" />
        </g>
        <g id="keysig3s">
            <use href="#sharp" x="000" y="000" />
            <use href="#sharp" x="100" y="150" />
            <use href="#sharp" x="200" y="-50" />
        </g>
        <g id="keysig4s">
            <use href="#sharp" x="000" y="000" />
            <use href="#sharp" x="100" y="150" />
            <use href="#sharp" x="200" y="-50" />
            <use href="#sharp" x="300" y="100" />
        </g>
        <g id="keysig5s">
            <use href="#sharp" x="000" y="000" />
            <use href="#sharp" x="100" y="150" />
            <use href="#sharp" x="200" y="-50" />
            <use href="#sharp" x="300" y="100" />
            <use href="#sharp" x="400" y="250" />
        </g>
        <g id="keysig6s">
            <use href="#sharp" x="000" y="000" />
            <use href="#sharp" x="100" y="150" />
            <use href="#sharp" x="200" y="-50" />
            <use href="#sharp" x="300" y="100" />
            <use href="#sharp" x="400" y="250" />
            <use href="#sharp" x="500" y="050" />
        </g>
        <g id="keysig7s">
            <use href="#sharp" x="000" y="000" />
            <use href="#sharp" x="100" y="150" />
            <use href="#sharp" x="200" y="-50" />
            <use href="#sharp" x="300" y="100" />
            <use href="#sharp" x="400" y="250" />
            <use href="#sharp" x="500" y="050" />
            <use href="#sharp" x="600" y="200" />
        </g>
        <g id="keysig1f">
            <use href="#flat" x="000" y="200" />
        </g>
        <g id="keysig2f">
            <use href="#flat" x="000" y="200" />
            <use href="#flat" x="090" y="050" />
        </g>
        <g id="keysig3f">
            <use href="#flat" x="000" y="200" />
            <use href="#flat" x="090" y="050" />
            <use href="#flat" x="180" y="250" />
        </g>
        <g id="keysig4f">
            <use href="#flat" x="000" y="200" />
            <use href="#flat" x="090" y="050" />
            <use href="#flat" x="180" y="250" />
            <use href="#flat" x="270" y="100" />
        </g>
        <g id="keysig5f">
            <use href="#flat" x="000" y="200" />
            <use href="#flat" x="090" y="050" />
            <use href="#flat" x="180" y="250" />
            <use href="#flat" x="270" y="100" />
            <use href="#flat" x="360" y="300" />
        </g>
        <g id="keysig6f">
            <use href="#flat" x="000" y="200" />
            <use href="#flat" x="090" y="050" />
            <use href="#flat" x="180" y="250" />
            <use href="#flat" x="270" y="100" />
            <use href="#flat" x="360" y="300" />
            <use href="#flat" x="450" y="150" />
        </g>
        <g id="keysig7f">
            <use href="#flat" x="000" y="200" />
            <use href="#flat" x="090" y="050" />
            <use href="#flat" x="180" y="250" />
            <use href="#flat" x="270" y="100" />
            <use href="#flat" x="360" y="300" />
            <use href="#flat" x="450" y="150" />
            <use href="#flat" x="540" y="350" />
        </g>
        <g id="templateTheoryTrebleClef1000">
            <use href="#fiveLineStaff" x="0" y="0" transform="scale(1000,1)" />
            <use href="#trebleClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" />
            <use href="#doubleBarline" x="1000" y="0" preserveAspectRatio="xMinYMin meet" />
        </g>
        <g id="templateTheoryTrebleClef1500">
            <use href="#fiveLineStaff" x="0" y="0" transform="scale(1500,1)" />
            <use href="#trebleClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" />
            <use href="#doubleBarline" x="1500" y="0" preserveAspectRatio="xMinYMin meet" />
        </g>
    </defs>
</svg>

調号レシピ(use)

以下の調号レシピは単体では表示されません。HTMLのどこかに必ずdefsを挿入してください。

シャープ編

♯0：ハ長調 / イ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♯♭なし）</title>
    <desc id="svg-desc">高音部譜表に描かれた♯♭なしの調号。これはハ長調またはイ短調を示しています。</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig0" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♯1：ト長調 / ホ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♯1）</title>
    <desc id="svg-desc">高音部譜表に描かれた♯1つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig1s" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♯2：ニ長調 / ロ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♯2）</title>
    <desc id="svg-desc">高音部譜表に描かれた♯2つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig2s" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♯3：イ長調 / 嬰へ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♯3）</title>
    <desc id="svg-desc">高音部譜表に描かれた♯3つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig3s" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♯4：ホ長調 / 嬰ハ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♯4）</title>
    <desc id="svg-desc">高音部譜表に描かれた♯4つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig4s" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♯5：ロ長調 / 嬰ト短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♯5）</title>
    <desc id="svg-desc">高音部譜表に描かれた♯5つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig5s" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♯6：嬰へ長調 / 嬰ニ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♯6）</title>
    <desc id="svg-desc">高音部譜表に描かれた♯6つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig6s" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♯7：嬰ハ長調 / 嬰イ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♯7）</title>
    <desc id="svg-desc">高音部譜表に描かれた♯7つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig7s" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

フラット編

♭0：ハ長調 / イ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♯♭なし）</title>
    <desc id="svg-desc">高音部譜表に描かれた♯♭なしの調号。これはハ長調またはイ短調を示しています。</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig0" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♭1：ヘ長調 / ニ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♭1）</title>
    <desc id="svg-desc">高音部譜表に描かれた♭1つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig1f" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♭2：変ロ長調 / ト短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♭2）</title>
    <desc id="svg-desc">高音部譜表に描かれた♭2つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig2f" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♭3：変ホ長調 / ハ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♭3）</title>
    <desc id="svg-desc">高音部譜表に描かれた♭3つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig3f" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♭4：変イ長調 / ヘ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♭4）</title>
    <desc id="svg-desc">高音部譜表に描かれた♭4つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig4f" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♭5：変ニ長調 / 変ロ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♭5）</title>
    <desc id="svg-desc">高音部譜表に描かれた♭5つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig5f" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♭6：変ト長調 / 変ホ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♭6）</title>
    <desc id="svg-desc">高音部譜表に描かれた♭6つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig6f" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

♭7：変ハ長調 / 変イ短調

コード

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">高音部譜表の調号（♭7）</title>
    <desc id="svg-desc">高音部譜表に描かれた♭7つの調号</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig7f" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

出力

おまけ：テンプレートとデータセット

調号レシピは以下のSVGテンプレートに調号データセットを流し込んで生成されました。

SVGテンプレート

<svg viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title svg-desc"
    role="img" preserveAspectRatio="xMidYMid meet">
    <title id="svg-title">{{ph_title}}</title>
    <desc id="svg-desc">{{ph_desc}}</desc>
    <g transform="translate(0,300)">
        <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
        <use href="#keysig{{ph_keysig}}" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
    </g>
</svg>

調号データセット

これはph_title、ph_desc、ph_keysigという3つのプレースホルダー（目印）に対する値の組です

ph_title	ph_desc	ph_keysig
高音部譜表の調号（♯♭なし）	高音部譜表に描かれた♯♭なしの調号。これはハ長調またはイ短調を示しています。	0
高音部譜表の調号（♯1）	高音部譜表に描かれた♯1つの調号。これはト長調またはホ短調を示しています。	1s
高音部譜表の調号（♯2）	高音部譜表に描かれた♯2つの調号。これはニ長調またはロ短調を示しています。	2s
高音部譜表の調号（♯3）	高音部譜表に描かれた♯3つの調号。これはイ長調または嬰ヘ短調を示しています。	3s
高音部譜表の調号（♯4）	高音部譜表に描かれた♯4つの調号。これはホ長調または嬰ハ短調を示しています。	4s
高音部譜表の調号（♯5）	高音部譜表に描かれた♯5つの調号。これはロ長調または嬰ト短調を示しています。	5s
高音部譜表の調号（♯6）	高音部譜表に描かれた♯6つの調号。これは嬰ヘ長調または嬰ニ短調を示しています。	6s
高音部譜表の調号（♯7）	高音部譜表に描かれた♯7つの調号。これは嬰ハ長調または嬰イ短調を示しています。	7s
高音部譜表の調号（♭1）	高音部譜表に描かれた♭1つの調号。これはヘ長調またはニ短調を示しています。	1f
高音部譜表の調号（♭2）	高音部譜表に描かれた♭2つの調号。これは変ロ長調またはト短調を示しています。	2f
高音部譜表の調号（♭3）	高音部譜表に描かれた♭3つの調号。これは変ホ長調またはハ短調を示しています。	3f
高音部譜表の調号（♭4）	高音部譜表に描かれた♭4つの調号。これは変イ長調またはヘ短調を示しています。	4f
高音部譜表の調号（♭5）	高音部譜表に描かれた♭5つの調号。これは変ニ長調または変ロ短調を示しています。	5f
高音部譜表の調号（♭6）	高音部譜表に描かれた♭6つの調号。これは変ト長調または変ホ短調を示しています。	6f
高音部譜表の調号（♭7）	高音部譜表に描かれた♭7つの調号。これは変ハ長調または変イ短調を示しています。	7f

おまけ2：Shortcoderの例

ワードプレスプラグインのShortcoderの場合は以下のように登録するとよいでしょう。

ショートコードを作成

<svg id="%%id%%" viewBox="0 0 1500 1000" class="score" style="width: 100%; display: block;" aria-labelledby="svg-title-%%id%% svg-desc-%%id%%"
    role="img" preserveAspectRatio="xMidYMid meet">
  <title id="svg-title-%%id%%">%%title:高音部譜表の調号譜例%%</title>
  <desc id="svg-desc-%%id%%">%%desc:高音部譜表に描かれた調号の譜例%%</desc>
  <g transform="translate(0,300)">
    <use href="#templateTheoryTrebleClef1500" x="0" y="0" />
    <use href="#keysig%%keysig:0%%" x="400" y="0" preserveAspectRatio="xMinYMin meet" />
  </g>
</svg>

ショートコード

[sc name="svg_score_keysig" id="hoge" title="高音部譜表の調号譜例（♯1）" desc="高音部譜表に描かれた♯１つの調号譜例" keysig="1s"/]

まとめ

このSVG部品集をご利用いただきありがとうございます。すべての調号がSVGで表現されているため、解像度を気にせず、ウェブサイトやアプリケーションに美しく楽譜を表示できます。CSSで色やサイズを自由にカスタマイズできるのも大きな利点です。

何度も申し訳ないですが、これらのレシピは単体では表示されません。HTMLのどこかに必ずdefsを挿入してください。

このコレクションが、あなたのプロジェクトの一助となれば幸いです。フィードバックや追加してほしい部品のリクエストがあれば、ぜひお知らせください！