How to make SVG image fit the size of a DIV?

Asked

Viewed 2,204 times

4

I have an image SVG of more or less 100 lines and 60 paths and need it to fit to any block node, such as a div for example.

I tried to put a class css in the tag svg and adjust the width for 100% but it cut the image instead of adjusting all paths.

Here’s what I tried (right into html):

<section class="contain-svg">
    <svg bla bla bla class="classeQueAlteraWidth">
        //resto do svg...
    </svg>
</section>

ps: I don’t understand XML.

2 answers

3

You can use svg as background and adjust with background-size to make the image size fit the element size.

Example:

#div1 {
    width: 100px;
    height: 150px;
    background-image: url(http://imgh.us/terco003.svg);
    background-size: 100% 100%;
}

#div2 {
    width: 300px;
    height: 400px;
    background-image: url(http://imgh.us/terco003.svg);
    background-size: 100% 100%;
}
<div id="div1"></div>
<div id="div2"></div>

3


In your specific case, if you look at the code of svg the height and width are being set:

 <svg width="678pt" height="1200pt" ...

Simply change this height or remove it (working only with CSS), for example:

.contain-svg {
    width: 200px;
}
<section class="contain-svg">
    <svg viewBox="0 0 678 1200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="#000000ff">
<path fill="#000000" opacity="1.00" d=" M 319.37 0.00 L 322.63 0.00 C 326.82 1.05 331.22 2.48 334.18 5.82 C 338.39 10.83 339.89 18.17 337.34 24.30 C 335.69 28.97 331.56 32.31 327.05 34.06 C 321.83 36.16 315.70 35.00 311.12 31.90 C 303.20 26.50 301.37 13.99 307.67 6.69 C 310.64 3.14 315.04 1.31 319.37 0.00 Z" />
<path fill="#000000" opacity="1.00" d=" M 358.36 1.34 C 367.81 -1.27 378.03 5.95 379.71 15.36 C 380.74 19.74 379.25 24.25 377.00 27.99 C 373.97 33.13 367.83 35.71 362.08 35.89 C 356.84 35.38 351.35 33.16 348.39 28.60 C 346.40 25.46 344.89 21.82 344.95 18.04 C 345.48 10.45 350.90 3.30 358.36 1.34 Z" />
<path fill="#000000" opacity="1.00" d=" M 274.39 4.40 C 277.20 3.72 280.13 3.78 283.00 3.96 C 287.37 4.17 291.05 7.02 293.76 10.25 C 296.69 13.75 297.37 18.55 297.06 22.97 C 296.66 29.58 291.65 35.43 285.44 37.43 C 280.04 38.87 273.79 38.30 269.36 34.65 C 265.05 31.80 263.09 26.66 262.49 21.74 C 262.37 14.26 267.13 6.71 274.39 4.40 Z" />
<path fill="#000000" opacity="1.00" d=" M 400.41 7.43 C 404.43 6.41 408.83 6.74 412.66 8.33 C 418.62 11.13 422.45 17.52 422.82 24.00 C 422.45 33.04 414.54 42.12 405.00 41.13 C 397.68 41.54 390.46 36.56 388.55 29.45 C 387.35 24.49 387.53 18.85 390.51 14.52 C 392.71 10.96 396.50 8.69 400.41 7.43 Z" />
<path fill="#000000" opacity="1.00" d=" M 238.37 11.29 C 244.16 9.98 250.13 12.78 254.18 16.82 C 258.29 21.82 260.06 29.12 257.14 35.15 C 254.44 43.25 244.73 47.75 236.70 45.34 C 233.27 44.64 230.43 42.40 228.17 39.82 C 223.19 34.66 222.61 26.17 226.02 20.02 C 228.81 15.70 233.23 12.20 238.37 11.29 Z" />
<path fill="#000000" opacity="1.00" d=" M 440.42 19.43 C 445.81 18.03 451.94 19.05 456.20 22.79 C 460.59 26.02 462.63 31.59 462.68 36.91 C 462.20 43.38 457.91 49.31 452.08 52.07 C 448.90 53.40 445.35 53.21 441.99 53.03 C 435.85 52.66 431.05 47.59 428.82 42.19 C 427.11 36.85 427.50 30.53 430.91 25.92 C 433.13 22.67 436.73 20.63 440.42 19.43 Z" />
<path fill="#000000" opacity="1.00" d=" M 195.35 26.36 C 199.60 25.40 204.25 25.70 208.09 27.88 C 217.88 32.43 220.21 47.15 212.83 54.82 C 210.24 57.55 206.88 59.87 203.01 60.03 C 198.95 60.26 194.48 60.44 190.98 58.02 C 186.96 55.26 183.23 51.11 182.97 46.01 C 182.74 41.95 182.57 37.49 184.96 33.98 C 187.41 30.37 191.11 27.48 195.35 26.36 Z" />
<path fill="#000000" opacity="1.00" d=" M 477.39 35.40 C 482.42 34.22 487.97 34.74 492.38 37.59 C 496.46 39.70 498.55 44.12 499.65 48.38 C 500.95 53.52 499.16 58.97 496.21 63.20 C 492.27 67.75 485.91 69.81 480.00 69.05 C 474.88 68.76 470.80 65.01 467.95 61.06 C 464.44 56.19 464.07 49.33 467.17 44.16 C 469.55 40.32 472.99 36.79 477.39 35.40 Z" />
<path fill="#000000" opacity="1.00" d=" M 157.33 47.39 C 162.69 47.02 168.13 49.32 171.73 53.28 C 176.13 58.66 177.69 66.82 173.97 72.98 C 171.32 76.99 167.48 80.64 162.64 81.67 C 157.29 82.82 151.17 81.80 147.19 77.82 C 142.50 73.65 139.68 66.91 141.67 60.72 C 143.30 53.47 149.86 47.75 157.33 47.39 Z" />
<path fill="#000000" opacity="1.00" d=" M 517.40 58.42 C 520.79 57.65 524.37 57.66 527.80 58.21 C 537.63 60.84 543.03 73.32 538.35 82.33 C 535.29 88.22 528.83 92.77 521.99 92.15 C 513.08 92.54 506.13 84.15 505.03 75.89 C 504.92 68.26 509.97 60.65 517.40 58.42 Z" />
<path fill="#000000" opacity="1.00" d=" M 107.37 80.37 C 115.21 79.13 123.78 79.88 130.44 84.56 C 135.06 87.88 139.09 92.20 141.69 97.30 C 144.27 102.46 144.24 108.40 144.05 114.03 C 143.93 119.09 141.46 123.66 138.84 127.84 C 135.05 133.90 128.68 138.03 121.85 139.87 C 106.11 144.73 87.66 133.75 84.29 117.64 C 81.59 109.73 83.94 101.02 88.04 94.04 C 92.57 87.47 99.37 81.88 107.37 80.37 Z" />
<path fill="#000000" opacity="1.00" d=" M 562.34 85.44 C 570.10 85.32 577.93 88.11 583.79 93.21 C 589.35 98.38 593.26 105.49 593.90 113.12 C 595.81 128.03 584.54 143.06 569.91 145.96 C 561.04 148.05 551.21 145.66 544.30 139.71 C 537.74 134.44 533.26 126.49 532.95 118.00 C 531.96 106.03 539.06 94.09 549.71 88.71 C 553.69 86.92 557.99 85.84 562.34 85.44 Z" />
<path fill="#000000" opacity="1.00" d=" M 69.37 142.32 C 74.99 140.93 80.91 143.13 85.17 146.83 C 90.38 151.94 91.38 160.23 88.91 166.90 C 84.77 176.65 70.82 180.10 62.59 173.41 C 59.04 170.26 55.88 165.97 55.88 161.02 C 55.73 157.59 55.91 153.89 57.99 151.00 C 60.76 147.06 64.49 143.33 69.37 142.32 Z" />
<path fill="#000000" opacity="1.00" d=" M 594.39 149.39 C 600.54 147.91 607.64 149.18 612.17 153.83 C 615.83 158.09 618.10 164.02 616.66 169.63 C 615.20 175.29 611.27 180.76 605.44 182.42 C 601.85 183.36 598.00 183.40 594.39 182.61 C 587.49 180.17 582.22 173.40 582.03 166.00 C 582.22 158.61 587.48 151.83 594.39 149.39 Z" />
<path fill="#000000" opacity="1.00" d=" M 53.39 178.31 C 57.16 177.61 61.00 178.91 64.27 180.73 C 69.39 183.59 72.44 189.34 72.90 195.08 C 72.74 200.89 70.05 206.84 65.06 210.07 C 58.59 214.94 48.53 213.90 43.15 207.85 C 37.48 202.80 36.16 193.68 40.25 187.27 C 42.71 182.19 47.97 179.18 53.39 178.31 Z" />
<path fill="#000000" opacity="1.00" d=" M 187.09 180.10 C 197.97 178.39 209.10 178.60 220.00 180.01 C 226.28 180.73 232.62 180.99 238.85 182.11 C 278.89 187.95 317.69 200.01 355.85 213.18 C 366.44 217.30 377.25 220.85 387.71 225.29 C 402.87 231.08 417.58 237.94 432.34 244.65 C 442.01 249.64 451.95 254.12 461.37 259.60 C 472.66 265.41 483.40 272.21 494.32 278.68 C 503.91 284.25 512.93 290.73 522.20 296.81 C 533.03 304.59 544.15 312.02 554.28 320.73 C 558.22 324.12 562.37 327.28 566.24 330.76 C 577.39 341.96 589.54 352.54 597.80 366.20 C 602.57 373.22 605.86 381.21 607.51 389.53 C 609.75 399.64 604.55 410.45 596.19 416.21 C 586.86 422.98 575.27 425.72 564.00 427.04 C 559.03 427.77 554.02 428.20 549.00 428.04 C 542.14 427.79 535.25 428.44 528.42 427.59 C 520.42 426.60 512.34 426.24 504.42 424.66 C 460.52 417.74 418.06 403.75 377.00 387.00 C 361.86 381.14 347.11 374.36 332.33 367.67 C 320.35 361.65 308.31 355.73 296.38 349.61 C 294.97 348.94 293.54 348.26 292.01 347.96 C 290.75 348.21 289.62 348.86 288.51 349.49 C 280.68 354.18 273.42 359.75 265.87 364.86 C 257.48 370.68 250.06 377.72 242.27 384.28 C 238.72 387.42 236.03 391.36 232.82 394.83 C 227.58 400.64 223.67 407.57 220.87 414.86 C 218.17 422.49 217.99 431.28 221.40 438.72 C 228.85 439.63 236.38 438.42 243.85 439.22 C 254.59 440.39 265.33 442.04 275.63 445.37 C 282.99 447.80 290.43 450.12 297.34 453.65 C 304.36 457.25 311.60 460.45 318.18 464.83 C 330.08 473.03 341.90 481.59 351.74 492.26 C 359.27 499.12 365.48 507.21 371.99 515.00 C 388.22 536.51 401.84 560.02 412.07 584.96 C 419.84 602.90 425.44 621.69 430.36 640.60 C 431.79 646.90 433.21 653.22 434.42 659.58 C 435.38 664.72 435.90 669.95 437.17 675.04 C 445.43 667.08 450.52 656.57 455.22 646.27 C 457.51 640.58 460.33 635.02 464.30 630.31 C 466.28 627.91 469.75 627.49 472.62 628.17 C 475.37 630.07 476.13 633.77 475.95 636.93 C 475.34 643.85 473.46 650.60 471.17 657.14 C 468.83 664.34 464.97 670.90 461.64 677.66 C 457.59 684.43 453.30 691.13 448.02 697.01 C 440.73 704.41 432.36 710.66 425.25 718.25 C 416.59 726.92 407.91 735.57 399.26 744.24 C 389.24 755.29 379.35 766.50 370.55 778.55 C 366.47 783.76 363.22 789.59 360.69 795.70 C 357.24 803.68 354.36 811.93 352.47 820.42 C 351.48 826.24 349.88 832.02 349.94 837.98 C 349.93 841.95 349.84 845.92 350.14 849.89 C 350.46 854.08 352.37 857.89 353.65 861.84 C 346.92 863.23 340.07 864.17 333.22 864.61 C 327.48 857.83 325.84 848.59 324.99 840.00 C 325.03 826.14 328.62 812.53 333.68 799.70 C 337.06 791.59 340.33 783.39 344.81 775.81 C 349.36 768.05 353.50 760.03 358.59 752.59 C 370.20 734.88 383.19 718.08 397.26 702.26 C 400.84 698.17 405.38 694.96 408.52 690.51 C 410.46 685.95 410.14 680.82 409.96 675.99 C 409.12 668.22 408.41 660.32 405.80 652.91 C 403.20 655.04 401.61 658.03 399.79 660.80 C 395.99 666.81 391.62 672.54 386.23 677.23 C 382.85 680.15 378.56 682.31 374.00 682.16 C 369.14 682.34 364.81 679.69 360.95 677.05 C 356.91 674.26 356.20 668.59 352.07 665.92 C 348.87 664.68 345.28 665.15 342.08 663.94 C 339.96 662.86 338.11 661.11 337.02 659.00 C 335.90 656.22 335.71 653.18 334.62 650.40 C 330.99 649.52 326.78 649.79 323.81 647.18 C 320.70 643.38 321.10 637.73 317.66 634.12 C 311.88 632.85 307.33 637.56 302.16 639.20 C 298.98 640.62 295.53 639.48 292.35 638.71 C 289.61 637.93 286.76 637.25 284.37 635.64 C 281.29 633.33 279.71 629.60 279.05 625.91 C 276.61 615.96 279.90 605.90 281.01 596.01 C 281.98 582.54 276.82 569.05 268.20 558.80 C 264.05 554.27 259.67 549.88 254.56 546.44 C 249.82 543.26 245.46 539.55 240.98 536.01 C 238.00 533.68 235.28 531.03 232.87 528.12 C 227.41 521.42 221.96 514.58 218.29 506.69 C 211.15 492.94 207.69 477.54 206.81 462.14 C 206.58 459.90 206.38 457.60 205.51 455.51 C 203.28 452.13 199.85 449.78 197.53 446.47 C 192.48 439.66 188.11 431.72 187.96 423.03 C 187.90 417.74 187.61 412.31 189.15 407.17 C 191.94 397.06 196.98 387.66 203.40 379.41 C 207.44 374.16 211.38 368.78 216.23 364.23 C 223.57 357.24 230.22 349.49 238.27 343.27 C 244.57 337.81 251.22 332.76 257.86 327.72 C 255.16 325.45 252.07 323.73 249.06 321.94 C 230.54 310.11 212.56 297.41 195.71 283.29 C 189.72 278.66 184.64 273.03 179.16 267.84 C 174.68 262.98 169.64 258.64 165.63 253.36 C 158.20 243.99 151.11 233.96 147.59 222.38 C 145.67 216.39 145.31 209.86 146.71 203.72 C 147.74 199.12 150.91 195.41 154.19 192.19 C 158.82 187.60 165.03 185.16 171.09 183.08 C 176.26 181.31 181.70 180.78 187.09 180.10 M 233.41 211.38 C 225.66 212.29 217.81 214.02 211.04 218.04 C 204.66 222.14 199.75 229.82 201.31 237.61 C 202.39 245.03 206.04 251.75 209.95 258.04 C 216.11 267.03 223.95 274.69 231.81 282.18 C 238.62 287.71 245.08 293.72 252.37 298.64 C 257.48 302.18 262.42 305.95 267.59 309.41 C 309.68 337.33 355.76 358.82 403.28 375.74 C 411.62 379.09 420.36 381.25 428.88 384.08 C 452.03 391.06 475.83 396.14 499.97 397.97 C 514.15 398.06 528.93 398.92 542.31 393.33 C 547.84 391.48 552.66 387.79 556.10 383.11 C 559.85 377.65 559.84 370.39 557.71 364.32 C 554.35 354.35 547.31 346.26 540.63 338.35 C 535.45 332.19 529.03 327.30 523.09 321.92 C 515.79 316.18 508.51 310.41 500.87 305.11 C 493.74 299.77 485.97 295.39 478.56 290.46 C 460.67 279.61 442.58 268.93 423.36 260.60 C 411.04 254.60 398.32 249.46 385.57 244.45 C 373.20 240.13 361.05 235.12 348.43 231.54 C 317.77 221.60 286.27 213.40 254.02 211.03 C 247.15 211.01 240.25 210.66 233.41 211.38 M 231.34 459.32 C 228.15 460.63 225.26 463.45 225.06 467.06 C 224.61 471.61 224.78 476.31 226.31 480.67 C 228.18 486.25 230.33 491.75 232.96 497.02 C 234.57 500.25 235.93 503.83 238.87 506.13 C 242.48 509.13 246.43 511.97 248.87 516.09 C 250.68 518.91 251.87 522.42 254.96 524.14 C 259.52 520.31 263.63 515.94 268.60 512.59 C 275.22 507.45 283.59 504.69 291.98 504.95 C 299.97 505.17 307.98 504.69 315.96 505.17 C 316.09 508.73 315.61 512.32 314.67 515.76 C 308.57 516.13 302.40 515.92 296.41 517.39 C 284.41 519.12 273.00 525.71 266.18 535.82 C 269.41 538.61 272.99 540.98 276.19 543.81 C 278.85 546.05 281.33 548.68 284.63 549.98 C 285.21 547.71 285.61 545.39 286.33 543.17 C 288.62 542.94 291.27 542.37 293.35 543.61 C 294.18 546.58 294.25 549.74 295.29 552.67 C 296.16 555.02 298.64 556.35 301.00 556.74 C 303.45 556.45 305.92 555.44 307.66 553.66 C 311.75 549.23 314.47 543.79 317.90 538.88 C 319.74 536.68 322.56 534.40 325.62 535.12 C 327.96 536.82 329.07 539.92 328.75 542.76 C 328.24 547.20 327.13 551.55 325.83 555.83 C 325.21 557.94 324.01 559.91 322.22 561.24 C 317.51 564.93 311.34 565.58 306.01 568.02 C 302.94 569.44 299.58 570.70 297.26 573.26 C 297.84 580.99 298.64 588.72 299.56 596.42 C 300.19 601.82 300.35 607.28 301.36 612.63 C 305.63 615.01 310.55 613.65 315.08 613.08 C 320.17 612.37 325.80 613.76 329.31 617.69 C 331.30 619.76 332.44 622.55 334.63 624.44 C 341.17 626.16 348.30 623.53 354.67 626.31 C 358.14 627.67 360.59 630.89 361.54 634.44 C 362.84 639.29 362.98 644.42 364.83 649.14 C 366.48 653.44 368.03 658.23 371.90 661.10 C 373.31 662.08 374.90 663.27 376.74 663.00 C 382.38 657.87 386.33 651.12 392.32 646.32 C 396.13 642.94 401.02 641.10 404.86 637.78 C 403.89 632.91 401.80 628.36 400.38 623.62 C 395.57 610.24 390.97 596.76 385.26 583.73 C 381.13 573.53 375.86 563.85 370.98 554.00 C 361.76 537.57 351.12 521.64 337.24 508.76 C 331.87 503.09 326.21 497.70 319.86 493.14 C 312.74 487.30 304.66 482.86 296.73 478.24 C 287.31 472.81 277.07 469.05 267.01 465.00 C 259.74 462.07 252.13 460.06 244.46 458.53 C 240.12 457.67 235.46 457.51 231.34 459.32 Z" />
<path fill="#000000" opacity="1.00" d=" M 614.38 183.35 C 619.42 182.10 625.07 183.54 628.81 187.18 C 631.64 189.85 634.47 193.05 634.95 197.07 C 635.35 201.09 635.42 205.55 633.02 209.01 C 629.67 213.99 624.19 217.98 618.00 217.97 C 613.57 217.80 609.16 216.11 605.82 213.19 C 602.10 209.51 600.49 204.12 600.84 198.97 C 600.56 191.27 607.11 184.78 614.38 183.35 Z" />
<path fill="#000000" opacity="1.00" d=" M 36.36 217.34 C 40.82 216.32 45.70 216.98 49.63 219.36 C 55.41 222.92 59.13 229.96 57.86 236.77 C 57.01 243.59 51.73 249.49 45.06 251.11 C 39.92 253.06 34.31 250.97 30.07 247.93 C 26.08 245.16 23.78 240.50 23.17 235.77 C 22.65 227.56 28.35 219.42 36.36 217.34 Z" />
<path fill="#000000" opacity="1.00" d=" M 628.39 220.41 C 631.50 219.67 634.76 219.74 637.93 220.07 C 641.46 220.46 644.43 222.69 646.82 225.19 C 653.71 232.06 652.63 245.07 644.63 250.65 C 636.89 257.38 623.39 254.16 618.76 245.23 C 616.51 241.10 616.42 236.04 617.57 231.57 C 619.32 226.57 623.23 222.00 628.39 220.41 Z" />
<path fill="#000000" opacity="1.00" d=" M 29.33 258.41 C 36.11 257.88 43.14 261.74 46.12 267.91 C 50.69 275.81 47.07 286.95 39.03 291.06 C 34.80 293.70 29.43 293.57 24.79 292.22 C 17.70 289.84 13.24 282.35 13.10 275.08 C 13.43 270.72 15.29 266.48 18.30 263.31 C 21.26 260.45 25.32 259.01 29.33 258.41 Z" />
<path fill="#000000" opacity="1.00" d=" M 640.37 261.33 C 644.30 260.31 648.45 261.21 652.05 262.93 C 657.88 265.53 661.42 271.88 661.66 278.11 C 661.69 283.42 659.40 288.87 655.05 292.06 C 651.42 294.73 646.82 296.72 642.24 295.84 C 637.14 294.83 632.31 291.95 629.40 287.60 C 627.02 283.98 626.49 279.41 627.16 275.21 C 628.39 268.57 633.74 262.80 640.37 261.33 Z" />
<path fill="#000000" opacity="1.00" d=" M 21.38 296.28 C 24.94 295.44 28.58 296.64 31.71 298.29 C 36.02 300.54 39.67 304.49 40.66 309.36 C 41.75 314.47 40.92 320.32 37.29 324.29 C 33.70 328.26 28.64 331.62 23.05 331.06 C 17.80 330.52 12.42 328.07 9.38 323.62 C 6.55 319.09 5.01 313.28 7.14 308.16 C 9.11 301.84 14.95 297.33 21.38 296.28 Z" />
<path fill="#000000" opacity="1.00" d=" M 647.41 304.44 C 650.98 303.58 654.84 303.56 658.37 304.64 C 664.92 307.28 669.47 313.99 669.82 321.00 C 669.46 328.01 664.92 334.72 658.37 337.36 C 651.22 339.54 642.20 337.52 638.10 330.88 C 634.59 325.66 633.60 318.49 636.88 312.91 C 638.77 308.55 643.00 305.79 647.41 304.44 Z" />
<path fill="#000000" opacity="1.00" d=" M 16.39 339.29 C 19.91 338.56 23.39 340.04 26.54 341.46 C 32.16 343.99 35.40 350.12 35.90 356.08 C 35.77 362.63 32.20 369.21 26.34 372.34 C 22.42 374.32 17.76 374.56 13.55 373.47 C 9.73 372.47 6.71 369.70 4.26 366.74 C 1.00 362.79 0.28 357.24 1.34 352.35 C 3.17 345.47 9.37 340.25 16.39 339.29 Z" />
<path fill="#000000" opacity="1.00" d=" M 655.40 344.34 C 659.76 343.21 664.25 344.79 668.00 347.00 C 672.12 349.40 674.50 353.90 675.66 358.39 C 676.82 362.74 675.19 367.25 673.00 371.00 C 670.59 375.12 666.10 377.50 661.61 378.67 C 657.26 379.82 652.74 378.21 649.02 375.99 C 643.29 372.63 640.13 365.64 641.02 359.11 C 641.85 351.72 648.18 345.61 655.40 344.34 Z" />
<path fill="#000000" opacity="1.00" d=" M 5.33 384.32 C 9.53 379.98 16.18 378.63 21.95 379.97 C 29.84 381.81 35.75 389.82 35.08 397.91 C 34.85 402.58 32.34 406.87 28.83 409.86 C 22.56 415.74 11.65 415.53 5.64 409.37 C 2.80 406.75 1.24 403.12 0.00 399.53 L 0.00 394.43 C 1.14 390.78 2.61 387.09 5.33 384.32 Z" />
<path fill="#000000" opacity="1.00" d=" M 659.15 383.61 C 663.98 383.40 668.57 385.69 671.84 389.16 C 677.24 393.96 678.54 402.64 674.82 408.84 C 672.45 412.71 668.97 416.30 664.44 417.45 C 659.99 418.55 654.97 418.56 650.97 416.05 C 644.17 412.53 640.32 403.96 642.56 396.57 C 643.47 393.51 644.87 390.46 647.25 388.25 C 650.47 385.30 654.81 383.77 659.15 383.61 Z" />
<path fill="#000000" opacity="1.00" d=" M 18.25 419.48 C 25.59 419.08 32.67 423.90 35.35 430.67 C 36.77 434.71 36.76 439.28 35.28 443.31 C 32.92 448.71 27.90 453.24 21.91 453.96 C 18.39 454.33 14.65 454.19 11.43 452.58 C 4.65 449.42 0.83 441.38 2.05 434.09 C 2.81 426.06 10.35 419.76 18.25 419.48 Z" />
<path fill="#000000" opacity="1.00" d=" M 642.88 441.98 C 642.57 433.57 649.18 425.87 657.26 424.14 C 662.15 423.29 667.21 424.96 671.18 427.79 C 674.99 430.52 676.67 435.11 678.00 439.42 L 678.00 443.60 C 677.02 446.55 675.91 449.53 674.08 452.08 C 671.30 456.07 666.56 458.34 661.83 458.95 C 652.27 459.72 643.21 451.54 642.88 441.98 Z" />
<path fill="#000000" opacity="1.00" d=" M 22.26 459.47 C 29.25 459.43 36.18 463.45 39.07 469.92 C 40.33 472.75 40.21 475.96 40.04 478.99 C 39.55 487.47 31.48 494.62 23.00 494.13 C 15.41 494.56 8.35 488.90 6.22 481.80 C 5.67 478.12 5.57 474.23 6.64 470.63 C 9.19 464.37 15.45 459.71 22.26 459.47 Z" />
<path fill="#000000" opacity="1.00" d=" M 652.35 463.37 C 655.44 462.72 658.68 462.67 661.80 463.20 C 670.21 465.38 676.64 474.65 674.41 483.31 C 673.57 488.25 670.02 492.24 666.02 495.02 C 662.55 497.41 658.09 497.36 654.07 496.94 C 648.25 495.83 643.04 491.57 641.07 485.94 C 637.47 477.11 642.85 465.51 652.35 463.37 Z" />
<path fill="#000000" opacity="1.00" d=" M 27.39 504.28 C 34.10 503.14 40.94 506.83 44.60 512.40 C 47.37 515.93 47.43 520.67 46.94 524.92 C 45.47 533.50 36.79 540.08 28.12 538.97 C 23.23 538.16 18.12 535.90 15.53 531.47 C 13.08 527.51 11.73 522.65 12.93 518.05 C 14.18 510.97 20.31 505.30 27.39 504.28 Z" />
<path fill="#000000" opacity="1.00" d=" M 650.37 505.28 C 654.74 504.27 659.25 505.76 663.00 508.00 C 668.14 511.01 670.68 517.17 670.90 522.92 C 670.35 529.90 665.87 536.87 658.94 538.95 C 652.40 541.75 644.85 538.67 640.17 533.83 C 635.18 528.67 634.61 520.16 638.02 514.01 C 640.81 509.70 645.23 506.21 650.37 505.28 Z" />
<path fill="#000000" opacity="1.00" d=" M 38.37 552.37 C 52.68 549.52 67.75 559.17 72.14 572.86 C 73.95 578.05 74.92 583.82 73.18 589.18 C 71.02 596.11 67.52 603.19 61.27 607.30 C 56.49 610.60 50.92 613.04 45.03 613.10 C 34.63 613.75 23.74 608.79 18.16 599.83 C 11.18 589.96 11.01 575.80 17.76 565.77 C 22.12 558.42 30.09 553.82 38.37 552.37 Z" />
<path fill="#000000" opacity="1.00" d=" M 636.36 552.37 C 645.07 550.60 654.26 553.41 661.17 558.82 C 667.63 564.24 672.21 572.39 672.12 580.96 C 672.26 585.68 671.87 590.53 669.91 594.90 C 665.18 605.66 653.90 613.43 642.01 613.11 C 630.98 613.78 620.92 606.77 615.29 597.71 C 612.16 591.58 609.85 584.43 611.53 577.54 C 612.83 571.93 615.00 566.29 619.18 562.18 C 623.65 557.16 629.80 553.74 636.36 552.37 Z" />
<path fill="#000000" opacity="1.00" d=" M 53.36 616.34 C 59.72 614.75 66.74 617.02 70.82 622.18 C 78.83 630.21 74.71 645.51 64.34 649.34 C 56.97 652.70 47.38 649.74 43.11 642.88 C 40.53 638.80 39.19 633.62 40.88 628.94 C 42.37 622.88 47.40 617.99 53.36 616.34 Z" />
<path fill="#000000" opacity="1.00" d=" M 626.39 618.30 C 631.09 617.64 636.04 619.37 639.74 622.25 C 644.30 626.79 647.67 633.78 645.21 640.20 C 643.07 647.57 635.87 653.58 628.01 653.10 C 617.63 653.22 609.03 642.27 611.20 632.23 C 611.95 629.32 613.41 626.62 615.26 624.26 C 617.94 620.82 622.22 619.12 626.39 618.30 Z" />
<path fill="#000000" opacity="1.00" d=" M 70.40 651.29 C 78.81 650.34 87.53 656.47 89.25 664.85 C 91.39 672.90 86.45 681.73 78.89 684.89 C 72.16 687.69 63.66 685.65 59.09 679.91 C 53.88 674.08 53.33 664.47 58.35 658.36 C 61.11 654.36 65.72 652.13 70.40 651.29 Z" />
<path fill="#000000" opacity="1.00" d=" M 609.39 656.39 C 614.41 655.38 620.10 655.52 624.48 658.51 C 628.28 660.86 630.64 665.00 631.79 669.23 C 633.21 676.23 629.95 684.13 623.66 687.69 C 617.68 691.38 608.97 691.25 603.72 686.28 C 596.73 680.96 594.75 669.51 600.70 662.71 C 603.11 660.06 605.89 657.47 609.39 656.39 Z" />
<path fill="#000000" opacity="1.00" d=" M 82.39 688.39 C 88.34 687.08 95.20 687.85 99.75 692.25 C 105.02 697.53 106.83 706.37 102.99 712.99 C 100.37 718.70 94.31 722.48 88.00 722.14 C 78.42 723.11 70.59 713.97 69.98 704.99 C 70.54 697.78 75.44 690.75 82.39 688.39 Z" />
<path fill="#000000" opacity="1.00" d=" M 598.25 691.48 C 605.02 691.29 612.15 694.58 614.99 701.01 C 619.99 709.34 614.93 720.66 606.66 724.67 C 601.30 726.77 594.48 727.04 589.83 723.18 C 586.63 720.64 583.59 717.50 582.53 713.45 C 579.58 703.43 587.67 691.72 598.25 691.48 Z" />
<path fill="#000000" opacity="1.00" d=" M 100.36 721.35 C 104.59 720.47 109.27 720.57 113.03 722.95 C 119.84 726.46 123.68 735.04 121.43 742.42 C 120.40 745.94 118.68 749.45 115.66 751.67 C 111.11 755.05 104.90 756.37 99.46 754.59 C 92.11 752.33 86.77 744.75 87.05 737.10 C 88.03 730.00 93.06 722.89 100.36 721.35 Z" />
<path fill="#000000" opacity="1.00" d=" M 575.36 725.37 C 578.97 724.72 582.83 724.50 586.37 725.64 C 594.02 728.75 599.51 737.74 597.05 745.96 C 595.37 753.98 587.13 759.90 579.00 759.11 C 570.52 759.12 562.87 751.48 562.89 743.00 C 562.16 735.22 567.55 726.94 575.36 725.37 Z" />
<path fill="#000000" opacity="1.00" d=" M 121.40 754.42 C 129.94 751.90 139.82 756.92 142.62 765.40 C 146.53 774.67 139.48 786.02 129.94 788.04 C 123.51 789.65 116.16 787.14 112.35 781.64 C 109.07 777.66 108.26 772.17 109.20 767.21 C 110.74 761.22 115.51 756.27 121.40 754.42 Z" />
<path fill="#000000" opacity="1.00" d=" M 554.40 758.40 C 557.40 757.59 560.61 757.76 563.64 758.35 C 567.80 759.14 571.13 762.08 573.75 765.25 C 579.09 772.16 577.47 783.28 570.34 788.35 C 563.98 794.00 553.49 793.23 547.32 787.68 C 544.33 784.51 542.27 780.31 541.94 775.95 C 541.40 768.14 547.13 760.80 554.40 758.40 Z" />
<path fill="#000000" opacity="1.00" d=" M 147.38 786.32 C 155.89 784.56 164.82 790.33 167.61 798.39 C 168.81 803.80 168.41 810.13 164.28 814.27 C 160.46 819.43 153.65 821.98 147.38 820.68 C 141.97 819.24 136.72 815.65 134.82 810.18 C 132.81 803.85 133.71 796.32 138.33 791.32 C 140.82 788.88 144.04 787.24 147.38 786.32 Z" />
<path fill="#000000" opacity="1.00" d=" M 535.37 789.31 C 543.39 788.71 552.14 793.89 554.03 802.02 C 556.49 809.73 552.30 818.57 545.34 822.35 C 539.59 825.06 532.26 824.88 527.13 820.89 C 520.35 816.22 517.70 806.13 521.88 798.91 C 524.36 793.67 529.78 790.30 535.37 789.31 Z" />
<path fill="#000000" opacity="1.00" d=" M 174.38 817.36 C 183.27 815.03 192.53 821.65 194.80 830.20 C 195.32 833.79 195.48 837.66 194.07 841.08 C 191.30 846.95 185.30 851.11 178.90 851.94 C 172.25 852.23 165.60 848.38 162.39 842.58 C 160.52 838.43 160.62 833.63 161.21 829.20 C 162.88 823.13 168.28 818.59 174.38 817.36 Z" />
<path fill="#000000" opacity="1.00" d=" M 509.35 819.38 C 514.89 819.15 520.59 821.57 523.86 826.14 C 527.62 830.07 527.33 835.91 526.94 840.94 C 525.70 847.38 519.99 852.27 513.77 853.79 C 508.10 855.00 502.12 852.91 497.83 849.17 C 492.49 843.95 491.44 835.28 494.65 828.66 C 497.53 823.28 503.29 819.78 509.35 819.38 Z" />
<path fill="#000000" opacity="1.00" d=" M 207.32 842.37 C 212.86 842.18 218.86 844.17 222.19 848.82 C 225.01 852.81 226.75 857.87 225.85 862.78 C 225.15 866.23 223.53 869.54 221.09 872.09 C 216.73 876.26 210.23 878.06 204.35 876.66 C 196.95 874.68 191.43 867.59 191.00 860.01 C 191.38 855.88 192.81 851.69 195.43 848.44 C 198.59 845.24 202.76 842.74 207.32 842.37 Z" />
<path fill="#000000" opacity="1.00" d=" M 476.40 843.33 C 482.52 842.25 489.28 845.03 493.06 849.94 C 495.97 854.57 498.37 860.58 495.95 865.94 C 493.36 874.27 483.88 879.84 475.36 877.66 C 470.96 876.78 467.48 873.61 464.83 870.17 C 460.85 864.81 461.17 857.10 464.54 851.53 C 467.09 847.24 471.63 844.49 476.40 843.33 Z" />
<path fill="#000000" opacity="1.00" d=" M 246.34 862.37 C 252.14 862.04 257.78 865.24 261.20 869.82 C 265.61 875.66 265.60 884.34 261.21 890.19 C 258.01 894.16 253.21 897.13 247.99 897.12 C 239.83 897.83 232.16 891.55 230.21 883.79 C 229.18 878.58 230.21 872.85 233.79 868.80 C 236.71 864.83 241.55 862.82 246.34 862.37 Z" />
<path fill="#000000" opacity="1.00" d=" M 443.37 863.34 C 448.72 861.98 454.47 863.92 458.58 867.42 C 463.93 872.46 465.65 880.94 462.66 887.66 C 459.69 893.95 452.97 898.08 446.03 898.04 C 437.01 897.29 429.50 889.13 429.31 880.12 C 429.59 877.21 430.47 874.37 431.79 871.78 C 434.05 867.34 438.71 864.62 443.37 863.34 Z" />
<path fill="#000000" opacity="1.00" d=" M 342.37 871.36 C 355.52 869.13 369.61 876.88 374.95 889.09 C 377.58 894.93 377.89 901.60 376.92 907.87 C 375.93 914.33 371.96 919.90 367.30 924.30 C 356.46 935.08 336.77 934.85 326.19 923.81 C 321.20 919.54 318.04 913.53 316.79 907.14 C 315.36 902.09 316.60 896.85 318.00 891.96 C 321.41 881.20 331.30 873.13 342.37 871.36 Z" />
<path fill="#000000" opacity="1.00" d=" M 283.35 878.34 C 288.25 877.29 293.79 878.00 297.75 881.24 C 302.19 884.72 304.79 890.34 304.90 895.93 C 304.19 900.84 302.17 906.02 297.94 908.94 C 293.68 911.96 288.08 914.05 282.94 912.11 C 274.10 910.07 268.07 900.12 270.36 891.35 C 271.73 885.00 277.10 879.85 283.35 878.34 Z" />
<path fill="#000000" opacity="1.00" d=" M 402.40 880.42 C 405.74 879.58 409.28 879.70 412.64 880.37 C 419.74 881.99 424.44 889.09 425.06 896.05 C 425.66 904.19 419.44 911.68 411.80 913.82 C 406.61 914.67 400.74 913.95 396.71 910.30 C 391.41 905.99 388.26 898.43 390.80 891.80 C 392.45 886.33 397.03 882.13 402.40 880.42 Z" />
<path fill="#000000" opacity="1.00" d=" M 343.37 940.34 C 351.07 939.31 358.42 944.76 361.37 951.63 C 363.31 958.39 361.98 966.66 356.18 971.19 C 351.77 974.36 345.90 976.11 340.56 974.44 C 337.52 973.47 334.61 971.92 332.33 969.68 C 327.94 964.89 326.81 957.74 328.64 951.63 C 331.07 945.60 336.96 941.24 343.37 940.34 Z" />
<path fill="#000000" opacity="1.00" d=" M 341.42 985.42 C 347.00 983.88 353.26 985.59 357.45 989.56 C 363.06 994.39 364.59 1002.97 361.67 1009.66 C 357.62 1018.37 345.80 1022.60 337.40 1017.58 C 332.37 1014.07 328.37 1008.43 328.32 1002.13 C 328.62 998.02 329.84 993.77 332.70 990.70 C 335.10 988.24 338.17 986.49 341.42 985.42 Z" />
<path fill="#000000" opacity="1.00" d=" M 341.41 1029.43 C 347.07 1027.78 353.29 1029.53 357.73 1033.27 C 363.32 1038.56 364.72 1047.47 361.34 1054.34 C 358.36 1059.89 352.26 1063.47 346.02 1063.80 C 336.70 1063.85 328.50 1055.32 328.32 1046.13 C 328.62 1042.02 329.85 1037.78 332.70 1034.70 C 335.09 1032.24 338.15 1030.47 341.41 1029.43 Z" />
<path fill="#000000" opacity="1.00" d=" M 328.23 1072.23 C 334.13 1071.59 340.08 1072.12 346.00 1072.02 C 352.26 1072.14 358.54 1071.57 364.77 1072.23 C 365.63 1084.05 364.37 1095.95 365.23 1107.77 C 376.86 1108.74 388.61 1107.13 400.22 1108.40 C 401.10 1111.49 400.99 1114.75 401.07 1117.94 C 401.03 1123.53 400.99 1129.11 400.88 1134.70 C 400.78 1137.41 400.77 1140.21 399.74 1142.78 C 388.26 1143.65 376.71 1142.35 365.23 1143.23 C 364.97 1145.12 364.92 1147.04 364.92 1148.98 C 365.09 1165.98 364.96 1182.99 365.00 1200.00 L 328.00 1200.00 C 328.00 1185.67 327.99 1171.33 328.01 1157.00 C 327.98 1152.40 328.32 1147.79 327.78 1143.22 C 316.28 1142.34 304.71 1143.69 293.22 1142.73 C 292.14 1139.26 292.78 1135.59 292.89 1132.04 C 293.26 1126.08 293.09 1120.10 292.66 1114.15 C 292.61 1112.16 292.24 1110.02 293.30 1108.22 C 304.76 1107.35 316.31 1108.63 327.78 1107.78 C 328.63 1095.95 327.37 1084.05 328.23 1072.23 Z" />
</g>
</svg>
</section>

code hidden by svg be very large.

Another way is to save this svg as a file (instead of inserting it directly into html) and calling it with the tag img:

.contain-svg > img {
    width: 100%
}

.contain-svg:nth-child(1) {
    height: 50px;
    width: 50px
}

.contain-svg:nth-child(2) {
    height: 200px;
    width: 200px
}

.contain-svg {
    float: left;
    margin: 10px
}
<section class="contain-svg">
    <img src='http://imgh.us/terco003.svg'/>
</section>

<section class="contain-svg">
    <img src='http://imgh.us/terco003.svg'/>
</section>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.