Reading SVG files with D3js

README.md

d3.text() is the 1st key to include a SVG file on the DOM using D3js, the 2nd one is d3.selection().html(). After you inject the SVG you can manipulate the SVG using common D3js technics.

boom.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="boom_x21_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1010 742.0487" enable-background="new 0 0 1010 742.0487" xml:space="preserve">
<g>
	<path fill="#231F20" d="M600.6182,35.621c14.1113,20.0073,21.166,42.4678,25.1104,66.2812
		c4.0215,1.7276,7.8233,3.6568,12.1035,4.7515l22.5762-63.1431c20.377,3.8882,41.6953,10.1944,61.9277,16.6729
		c-3.4463,36.8579-4.4531,72.7451-5.0488,108.8838c9.1104-16.8448,18.0547-34.5684,29.6494-49.3404
		c11.2207,0.8116,21.6944,3.5181,32.8947,4.7554l39.0644-71.7959c21.7422,2.4336,44.0859,5.7695,65.5391,9.7144
		c-12.8907,47.6172-25.2158,96.7802-36.2245,145.7993l30.667,9.833c5.6718-17.2427,11.1053-34.2803,16.7773-51.5288
		c38.8555,10.7026,77.7187,25.3017,114.3457,41.292l-47.0127,103.6533l-48.7314,115.9106
		c-12.9961,33.1045-25.1475,66.6846-37.9336,99.7979l-31.1465-13.1055c-4.0781,7.5781-5.8731,17.0176-8.0528,25.5645
		c24.5245,11.2451,57.1397,29.6211,58.0997,60.873c-1.3819,13.9951-8.5528,26.8379-21.875,33.0576
		c-9.0704,3.6475-18.5146,6.1817-28.5362,7.3907c-3.0624,12.8427-12.7177,23.5927-24.8779,28.373
		c-27.2783,12.208-65.4141,8.4854-92.2988-3.3213c-6.7002,24.5518-11.125,50.9483-15.4737,76.0586
		c-31.9238-6.4316-63.9629-10.7119-96.4629-14.8027l0.9795-6.2188l32.7315-120.4209c9.1738-30.5039,18.1396-60.9922,27.7285-91.0273
		l-1.085-0.0567c-19.3017,29.5196-38.3935,59.0635-56.2275,89.5293c-2.6289,0.4991-2.2637-2.2851-2.8301-3.8398
		c-1.4414-13.9375-2.4297-28.0615-4.5224-41.8154c-4.626,17.9541-7.5529,36.6512-11.335,55.0615l-24.4082-1.2676
		c-8.2363,33.3457-17.335,66.4395-24.9473,100.0342l-2.6777,1.3818c-26.7783-1.1895-51.8027-3.1474-80.3574-3.7802
		c5.375-23.9776,13.1494-48.4727,20.041-72.583c-8.7149,9.29-22.5088,16.374-36.5508,11.5175
		c-21.2705-7.3916-25.8008-32.5391-28.4394-52.3877c-8.044,8.8877-18.2569,21.7871-31.0801,26.9707
		c-18.1504,7.4863-40.5342,4.7988-55.6992-7.6982c-14.9444-12.2666-25.1582-28.1611-34.0459-44.4453
		c-3.7432,5.2275-4.3575,12.7705-6.6221,18.9326c-19.3213,54.6348-51.6211,104.9307-99.583,143.9951
		c-10.376-21.1162-17.834-44.0371-26.6455-65.9404c-9.9053,7.0654-19.9746,13.2461-30.2256,18.7754l-20.5313-54.5576
		l-35.956-107.3594L53.415,418.6347L15.7217,274.16L0,206.4203c38.2979-44.7725,88.9385-89.5444,151.127-73.7261
		c14.8964,5.1118,28.8808,15.1558,38.3642,28.4351c11.2197-3.3208,26.2715-5.3413,35.2832,4.4443
		c0.6152,0.6817,0.999,1.5645,1.8633,1.6128c10.125-56.8613,17.1035-115.6177,60.1621-156.2427
		c18.2656-13.7744,42.3193-14.0234,62.1397-3.6757c36.6367,24.0092,57.3408,66.8959,70.9043,105.7207
		c11.9873-30.3448,32.7011-66.0708,67.1396-74.4493c19.2354-19.9985,43.6641-39.7275,74.4072-31.4018
		C577.459,10.5834,591.127,22.3363,600.6182,35.621z"/>
</g>
<g>
	<path fill="#FFC412" d="M585.0313,43.6791c30.9755,49.4839,26.3085,113.7739,24.2753,173.227
		c-1.2207,15.0982-2.5263,31.7032-4.5214,45.0249l1.0849,0.0581c19.0528-66.1328,39.1807-132.0063,62.2637-196.4116
		c11.7959,2.1309,23.6904,6.6514,35.8701,9.6753l-3.667,78.419l-2.4951,126.1279c1.3535,11.3306-0.5947,23.5776,1.4482,34.2944
		c3.2354,0.1685,2.794-3.7529,4.3965-5.4043l36.666-75.6108l68.0909-129.8369l18.4005-32.8169
		c13.7343,2.2363,27.9306,4.06,41.1953,7.3564l-31.7032,121.3477l-28.6884,130.1694l-24.6006,130.5996l-10.9912,73.2744
		c-17.9102,2.9669-36.3965,16.7198-40.3702,34.708c-3.6669,20.3829,12.3428,37.2365,27.5176,49.2921l-2.9745,28.0079
		c-22.1143-3.7618-44.5459-9.6934-67.2949-13.4942c7.334-44.8828,14.8682-89.5244,24.5146-133.2021l25.6856-114.0782
		c4.9912-16.6425,8.082-34.2314,13.0635-50.8613c-0.412-0.46-1.1993-1.8037-1.92-0.5371l-21.6347,36.7666l-63.9444,108.4004
		l-0.7109-15.2002l-2.1787-127.8882c0.2705-5.1831,0.4521-12.7515-0.5381-18.6553l-1.083-0.0571l-11.4043,39.9009l-32.2978,128.685
		l-23.3331,106.4131l-0.0205,0.4219c-21.6621-0.0381-42.6738-3.9541-64.7216-4.8955
		c11.3066-54.418,21.3954-110.6348,38.8553-162.7783l-0.625-0.4658l-2.082,2.4961c-13.3711,36.1084-23.5166,76.9492-60.7969,98.1621
		c-10.1933,4.4492-23.8613,4.8183-33.748-0.6817c-33.6416-27.5381-37.5293-69.1035-43.2686-108.3847
		c-1.2676-8.9463,0.5557-18.8125-1.5849-27.5899l-1.084-0.0537c-5.625,53.626-13.6592,107.7852-44.6426,149.4658
		c-8.2256,8.2363-18.6777,13.3233-30.1299,8.8213c-36.6553-11.4502-53.3564-52.3887-67.9551-83.6885
		c-4.6465-10.4238-7.084-21.8125-11.7402-32.2412c-1.708-0.2978-2.6777,1.5938-2.3125,2.919
		c-2.8984,67.6289-30.3789,125.0957-70.4902,175.6162c-14.7149,16.125-28.7188,31.4258-47.4834,42.3486l-37.2705-102.8721
		L79.4355,447.0751L51.418,349.4496L19.3311,226.0629l-3.3116-15.3384c35.0352-40.3999,84.2354-78.3125,139.7139-58.5171
		c23.584,12.9341,36.9639,38.5381,37.7891,64.353c0.8252,46.168-20.377,82.9585-36.7041,121.7359l1.0273,1.1426
		c24.0723-13.0396,54.624-30.0621,82.7568-12.9971c3.2735,3.6435,7.7842,4.311,10.5772,9.0034l1.5068,0.0781
		C239.7773,247.14,236.4844,140.412,271.001,56.2479c9.4258-18.7841,28.2568-35.1206,50.5547-34.8183
		c29.6679-0.1822,43.8642,30.8833,58.1572,51.5576c38.7773,65.6968,45.8701,145.3389,45.0732,222.6069l1.584-1.4311
		c6.709-74.1475,21.2022-143.9893,49.9014-208.3233c13.7256-26.353,37.914-58.0029,69.7334-61.9677
		C562.0137,24.2806,575.5391,30.6205,585.0313,43.6791z"/>
</g>
<g>
	<path fill="#FF1D25" d="M982.874,217.2025l-53.6348,130.8179c-21.126,51.9453-39.084,105.3652-58.0889,158.0801l-53.3975-22.5088
		l22.6426-85.002l39.0283-128.9834c8.8125-27.6919,16.9033-53.9052,26.5684-81.3374
		C931.9453,197.2094,957.6504,206.7889,982.874,217.2025z"/>
</g>
<g>
	<path fill="#231F20" d="M542.3672,254.5453c9.6269,35.3706,2.543,79.6143-4.1094,115.6465
		c-7.9853,28.3872-13.0332,58.6567-33.2676,80.9907c-4.0214,2.3857-8.6963,4.9531-13.7832,2.7412
		c-19.2929-12.0557-15.1845-36.748-17.8047-57.0244c0.3165-43.293,6.584-84.3359,19.0147-123.0947
		c7.956-15.6065,11.1719-35.586,29.3613-43.7305C534.2656,231.3856,538.7764,244.3954,542.3672,254.5453z"/>
</g>
<g>
	<path fill="#231F20" d="M128.0908,241.7177c10.501,35.2021-12.3535,66.2763-29.8232,93.9443
		c-9.3487-28.2095-16-58.4443-24.0049-87.4556c10.1943-12.6753,24.2266-24.2846,41.0898-19.7158
		C120.6611,230.7186,126.4492,236.0023,128.0908,241.7177z"/>
</g>
<g>
	<path fill="#231F20" d="M351.2041,269.8705c23.7188,51.4795,23.5459,116.8784,12.709,174.7856
		c-4.6455,10.1455-4.7129,23.794-16.0479,29.4776c-19.5332-3.4082-22.2978-25.2071-28.6806-39.624
		c-13.3125-51.8018-24.7735-110.0103-8.8018-166.7803c3.3975-6.9688,7.5733-16.4903,16.9326-17.3067
		C338.5928,250.1454,346.002,261.5863,351.2041,269.8705z"/>
</g>
<g>
	<path fill="#FFFFFF" d="M114.5957,263.7557c1.4678,9.1661-1.7949,17.6612-5.0117,25.2867
		c-0.124-9.9683-13.4942-23.4488-0.6035-29.7017C111.5811,259.2533,114.0674,261.3456,114.5957,263.7557z"/>
</g>
<g>
	<path fill="#00B0ED" d="M522.085,352.2377c-1.7188,24.5962-5.0577,51.2798-17.21,72.2954c-1.5928,1.4355-4.002,1.958-5.8838,0.7773
		c-9.6846-13.7207-6.0752-33.0234-5.5762-50.7509c2.7061-18.4859,5.2305-37.8462,19.294-49.8833
		C523.9951,328.2953,521.0967,342.2269,522.085,352.2377z"/>
</g>
<g>
	<path fill="#00B0ED" d="M351.9727,345.9218c4.8183,23.8623,5.7402,47.7285,0.3076,72.7851l-3.666-0.1963
		c-7.584-24.8711-12.4981-55.0083-4.6465-80.8091C349.1797,333.2196,350.418,342.5966,351.9727,345.9218z"/>
</g>
<g>
	<path fill="#231F20" d="M195.9023,427.1864c6.7676,36.3066-8.3017,75.7988-27.4609,106.6338l-6.7666,9.3828l-2.4277-3.1533
		L128.5703,443.37c9.9629-16.5859,22.9492-37.1318,44.6709-38.1533C184.1826,407.0839,193.2354,416.2157,195.9023,427.1864z"/>
</g>
<g>
	<path fill="#00B0ED" d="M182.5713,442.079c2.9551,13.7978-0.9219,29.8418-5.7119,42.7988
		c-4.6543-10.4189-7.7071-22.2724-11.249-33.2861C167.8369,446.288,177.2148,428.5888,182.5713,442.079z"/>
</g>
<g>
	<path fill="#FF1D25" d="M875.2197,585.3641c3.2539,8.1778,1.5928,19.3497-4.3769,25.7628
		c-19.8203,18.6582-52.1963,16.5283-76.46,8.541c-19.2939-7.9463-44.1719-20.9434-46.3712-45.0928
		c-0.9316-11.0908,6.3633-18.0684,14.2344-23.7227c19.4473-11.5371,49.4326-9.0986,70.2314-1.083
		C849.6504,556.7274,867.3115,566.9686,875.2197,585.3641z"/>
</g>
<g>
	<path fill="#231F20" d="M846.2324,572.368c5.7979,5.0674,4.9824,12.3809,6.8242,18.544
		c-5.3164-1.8047-10.2226-7.4678-15.9238-10.1553c-20.2617-10.1543-43.1533-19.5762-67.8984-14.3779
		C791.4727,551.0829,825.251,559.5692,846.2324,572.368z"/>
</g>
</svg>

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
    height = 500;

d3.text('boom.svg', (textsvg) => {
  d3.selectAll("body")
    .html(textsvg)
    .select("*")
    .attr('width', `${width}px`)
    .attr('height', `${height}px`);
});

</script>
</body>
</html>

Pop Art Elements License.txt

These Pop Art Elements is licensed under Creative Commons Attribution 3.0 Unported License - http://creativecommons.org/licenses/by/3.0/.

Under this license, you are free to copy and redistribute the material in any medium or format, remix, transform and build upon the material for any purpose, even commercially. In exchange, you must give appropriate credit to Vecteezy (http://www.vecteezy.com/).

For more free resources, visit http://graphicflip.com/

- Monika Ratan

thumbnail.png