【コピペOK】SVG楽譜部品集：定義と基本構造

【コピペOK】SVG楽譜部品集
1. SVG定義要素（必須）
2. useのサンプル
  1. viewBox=”0 0 1000 1000″（正方形）
  2. viewBox=”0 0 1500 1000″（横長）
まとめと今後の展開
1. 次のステップ
2. まとめ

【コピペOK】SVG楽譜部品集

このページでは、SVG (Scalable Vector Graphics) を用いて作成された、楽典用の簡易譜例用部品を紹介します。下記のコードは、ご自身のウェブサイトやアプリケーションで自由にご利用（コピー＆ペースト）いただけます。

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

SVG定義要素（必須）

このブロックは、シャープや五線譜など、すべての部品が参照する元データです。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>
        <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>
        <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>
        <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>

        <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>
        <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>
        <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>
    </defs>
</svg>

このSVGコードの特徴と構造

このセクションでは、上記の SVG 定義要素（<defs>ブロック）の構造と、パーツを再利用可能にするための設計思想について解説します。

SVGの基本設計思想：再利用性 (<use>)

このコードは、楽譜部品を「定義」し、それを「再利用」するという、SVGの基本機能に基づいています。

定義 (<defs>): すべての部品（五線、記号）は <defs> タグの中に <g>（グループ）や <path>（描画）として定義されています。これらはこの時点では画面に表示されません。
再利用 (<use>): 各調号の SVG レシピでは、この定義された ID（例：#trebleClef や #sharp）を <use href="#ID名" /> という形で呼び出すことで、実際の楽譜画像を描画しています。これにより、コードの記述量が大幅に削減され、メンテナンスが容易になっています。

座標系の理解：五線譜上の位置

この SVG 部品集は、五線譜上の位置を直感的に制御できるように、独自の座標システムを採用しています。

ViewBoxのWidth（横幅）: 可変です。viewBoxのwidthと、五線譜の描画に使う<use>のtransform="scale(N,1)"の数値を合わせることで、五線が画面いっぱいに伸びます。（五線は幅1で定義されています。）
ViewBoxのHeight（高さ）: 1000固定です。ViewBoxの Y=500 に五線の第3線（中央線）が来るように設計されています。
五線譜の基準: 五線譜の高さ全体は 400 単位で構成されており、各線と線の間は均等に 100 単位のスペースが割り当てられています。つまり、音高を1つ上下（線から間、または間から線）する場合は、座標を $\pm\mathbf{50}$ 動かします。
シャープ/フラットの配置: 調号のシャープやフラットは、この五線譜の座標系を基準に <use x="..." y="..." /> 属性で呼び出されます。y の値を増減させることで、記号を線の上や間隔に正確に配置できます。

五線譜基準座標対照表（音高配置用）

以下の表は、五線譜基準 Y’座標（viewBoxのY軸に -300 された、五線譜の第5線を Y’=0 とした値）と、ト音記号における対応音高を示します。音符を配置する際は、この五線譜基準 Y’座標を使用します。

基準	SVG座標（高音部譜表の音）	五線座標（調号など）
描画領域線	0	-300
上第３間	50 (D6)	-250
上第２線	100 (C6)	-200
上第２間	150 (B5)	-150
上第１線	200 (A5)	-100
上第１間	250 (G5)	-50（調号♯3）
第５線	300 (F5)	0（調号♯1）
第４間	350 (E5)	50（調号♯6,♭2）
第４線	400 (D5)	100（調号♯4,♭4）
第３間	450 (C5)	150（調号♯2,♭6）
第３線	500 (B4)	200（調号♯7,♭1）
第２間	550 (A4)	250（調号♯5,♭3）
第２線	600 (G4)	300（調号♭5）
第１間	650 (F4)	350（調号♭7）
第１線	700 (D4)	400
下第１間	750 (D4)	450
下第１線	800 (C3)	500
下第２間	850 (B3)	550
下第２線	900 (A3)	600
下第３間	950 (G3)	650
描画領域線	1000	700

軽量性とスケーラビリティ

vector-effect="non-scaling-stroke": この属性が各線・パスに適用されているため、SVGをどんなサイズに拡大・縮小しても、線の太さは常に一定に保たれます。これにより、クリアでプロフェッショナルな視覚品質を維持します。
解像度非依存: SVG（Scalable Vector Graphics）形式であるため、表示するデバイスの解像度に依存せず、常に最高の品質で楽譜を表示できます。

CSSでカスタマイズする方法

近日公開予定のページで詳細を解説しますが、この部品集のすべての部品は <path> や <g> 要素で構成されており、CSSで色や線の太さを自由に変更できます。

/* 例: すべての線の色を青に変更 */
#svgDefs path {
    stroke: blue;
    fill: blue; /* 音符の塗りつぶしの色 */
}
/* 例: 五線譜だけを太くしたい場合 */
#oneLineStaff path {
    stroke-width: 10px; /* non-scaling-stroke の影響を受けない */
}

useのサンプル

viewBox=”0 0 1000 1000″（正方形）

コード

<div style="width: 100%; border: 1px solid red; margin-bottom: 20px;">
    <svg viewBox="0 0 1000 1000" class="score" preserveAspectRatio="xMinYMin meet">
        <g transform="translate(0,300)">
            <use href="#fiveLineStaff" x="0" y="0" transform="scale(1000,1)" /><!-- viwBoxのwidthと数値を合わせると、画面の端から端まで五線が伸びる -->
            <g class="clef">
                <use href="#trebleClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" />
                <!-- <use href="#sopranoClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" /> -->
                <!-- <use href="#mezzoSopranoClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" /> -->
                <!-- <use href="#altoClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" /> -->
                <!-- <use href="#tenorClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" /> -->
                <!-- <use href="#baritoneClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" /> -->
                <!-- <use href="#bassClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" /> -->
            </g>
            <g class="bar-line">
                <!-- <use href="#singleBarline" x="400" y="0" preserveAspectRatio="xMinYMin meet" /> -->
                <use href="#doubleBarline" x="1000" y="0" preserveAspectRatio="xMinYMin meet" />
                <!-- <use href="#finalBarline" x="1000" y="0" preserveAspectRatio="xMinYMin meet" /> -->
            </g>
        </g>
        <g class="keysig" transform="translate(400,300)"><!-- Y座標300は第５線を0としている -->
            <!-- <use href="#keysig1s" x="0" y="0" preserveAspectRatio="xMinYMin meet" />                  -->
            <!-- <use href="#keysig1f" x="0" y="0" preserveAspectRatio="xMinYMin meet" /> -->
        </g>
        <g class="note1" transform="translate(600,0)"><!-- x座標600の例 -->
            <g class="target-note" transform="translate(0,500)">
                <use class="whole-note" href="#wholeNote" x="0" y="0" stroke="none" preserveAspectRatio="none" />
                <!-- 臨時記号は右合わせ -->
                <g class="accidentals" transform="translate(-120,0)">
                    <!-- <use class="double-sharp" href="#doubleSharp" x="0" y="0" /> -->
                    <!-- <use class="sharp" href="#sharp" x="0" y="0" /> -->
                    <!-- <use class="natural" href="#natural" x="0" y="0" /> -->
                    <!-- <use class="flat" href="#flat" x="0" y="0" /> -->
                    <!-- <use class="double-flat" href="#doubleFlat" x="0" y="0" /> -->
                </g>
            </g>
            <!-- 加線 -->
            <g class="ledger-lines">
                <!-- <use class="ledger-line-2nd-above" href="#ledgerLine" x="0" y="100" />
                <use class="ledger-line-1st-above" href="#ledgerLine" x="0" y="200" />
                <use class="ledger-line-1st-below" href="#ledgerLine" x="0" y="800" />
                <use class="ledger-line-2nd-below" href="#ledgerLine" x="0" y="900" /> -->
            </g>

        </g>
        <!-- ガイド -->
        <g class="grid">
            <line x1="0" y1="100" x2="1000" y2="100" stroke="green" stroke-width="2" />
            <line x1="0" y1="200" x2="1000" y2="200" stroke="green" stroke-width="2" />
            <line x1="0" y1="300" x2="1000" y2="300" stroke="green" stroke-width="2" />
            <line x1="0" y1="400" x2="1000" y2="400" stroke="green" stroke-width="2" />
            <line x1="0" y1="500" x2="1000" y2="500" stroke="red" stroke-width="2" />
            <line x1="0" y1="600" x2="1000" y2="600" stroke="green" stroke-width="2" />
            <line x1="0" y1="700" x2="1000" y2="700" stroke="green" stroke-width="2" />
            <line x1="0" y1="800" x2="1000" y2="800" stroke="green" stroke-width="2" />
            <line x1="0" y1="900" x2="1000" y2="900" stroke="green" stroke-width="2" />
            <line x1="0" y1="1000" x2="1000" y2="1000" stroke="green" stroke-width="2" />
            <line x1="0" y1="1100" x2="1000" y2="1100" stroke="red" stroke-width="2" />
            <line x1="100" y1="0" x2="100" y2="1000" stroke="green" stroke-width="2" />
            <line x1="200" y1="0" x2="200" y2="1000" stroke="green" stroke-width="2" />
            <line x1="300" y1="0" x2="300" y2="1000" stroke="green" stroke-width="2" />
            <line x1="400" y1="0" x2="400" y2="1000" stroke="green" stroke-width="2" />
            <line x1="500" y1="0" x2="500" y2="1000" stroke="red" stroke-width="2" />
            <line x1="600" y1="0" x2="600" y2="1000" stroke="green" stroke-width="2" />
            <line x1="700" y1="0" x2="700" y2="1000" stroke="green" stroke-width="2" />
            <line x1="800" y1="0" x2="800" y2="1000" stroke="green" stroke-width="2" />
            <line x1="900" y1="0" x2="900" y2="1000" stroke="green" stroke-width="2" />
        </g>
    </svg>
</div>

出力

viewBox=”0 0 1500 1000″（横長）

コード

<div style="width: 100%; border: 1px solid blue;">
    <svg viewBox="0 0 1500 1000" class="score">
        <g transform="translate(0,300)">
            <use href="#fiveLineStaff" x="0" y="0" transform="scale(1500,1)" />
            <g class="clef">
                <use href="#trebleClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" />
                <!-- <use href="#sopranoClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" /> -->
                <!-- <use href="#mezzoSopranoClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" /> -->
                <!-- <use href="#altoClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" /> -->
                <!-- <use href="#tenorClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" /> -->
                <!-- <use href="#baritoneClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" /> -->
                <!-- <use href="#bassClef" x="50" y="0" preserveAspectRatio="xMinYMin meet" /> -->
            </g>
            <g class="bar-line">
                <!-- <use href="#singleBarline" x="400" y="0" preserveAspectRatio="xMinYMin meet" /> -->
                <use href="#doubleBarline" x="1500" y="0" preserveAspectRatio="xMinYMin meet" />
                <!-- <use href="#finalBarline" x="1500" y="0" preserveAspectRatio="xMinYMin meet" /> -->
            </g>
        </g>
        <g class="keysig" transform="translate(400,300)">
            <use href="#keysig7s" x="0" y="0" preserveAspectRatio="xMinYMin meet" />
            <!-- <use href="#keysig1f" x="0" y="0" preserveAspectRatio="xMinYMin meet" /> -->
        </g>
        <g class="note1" transform="translate(1200,0)">
            <g class="target-note" transform="translate(0,800)">
                <use class="whole-note" href="#wholeNote" x="0" y="0" stroke="none" preserveAspectRatio="none" />
                <!-- 臨時記号は右合わせ -->
                <g class="accidentals" transform="translate(-120,0)">
                    <!-- <use class="double-sharp" href="#doubleSharp" x="0" y="0" /> -->
                    <!-- <use class="sharp" href="#sharp" x="0" y="0" /> -->
                    <use class="natural" href="#natural" x="0" y="0" />
                    <!-- <use class="flat" href="#flat" x="0" y="0" /> -->
                    <!-- <use class="double-flat" href="#doubleFlat" x="0" y="0" /> -->
                </g>
            </g>
            <!-- 加線 -->
            <g class="ledger-lines">
                <!-- <use class="ledger-line-2nd-above" href="#ledgerLine" x="0" y="100" /> -->
                <!-- <use class="ledger-line-1st-above" href="#ledgerLine" x="0" y="200" /> -->
                <use class="ledger-line-1st-below" href="#ledgerLine" x="0" y="800" />
                <!-- <use class="ledger-line-2nd-below" href="#ledgerLine" x="0" y="900" /> -->
            </g>

        </g>

    </svg>


</div>

出力

まとめと今後の展開

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

次のステップ

CSSでカスタマイズ（近日公開予定）
調号の譜例（近日公開予定）
音階の譜例（近日公開予定）
和音の譜例（近日公開予定）

まとめ

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