Можно ли преобразовать svg g в html div?

Question

У меня есть файл svg, и я хотел бы знать, можно ли автоматически преобразовать его в код html, где <g> включен в <div>.

Например:

Этот код

<svg version="1.1" id="wufoo-ad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">

  <g>
    <!-- background -->
    <rect class="wufoo-background" fill="#D03E27" width="400" height="400" />
  </g>

  <g>
    <!-- logo letters -->
    <path class="wufoo-letter" fill="#F4F4F4" d="M60.858,129...." />
    <path class="wufoo-letter" fill="#F4F4F4" d="..." />
  </g>

  <!-- dinosaur -->
  <g class="trex">
     <path ... />
     <path ... />
  </g>

</svg>

становится

<svg version="1.1" id="wufoo-ad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
  <div>
    <g>
      <!-- background -->
      <rect class="wufoo-background" fill="#D03E27" width="400" height="400" />
    </g>
  </div>

  <div>
    <g>
      <!-- logo letters -->
      <path class="wufoo-letter" fill="#F4F4F4" d="M60.858,129...." />
      <path class="wufoo-letter" fill="#F4F4F4" d="..." />
    </g>
  </div>

  <div>
    <!-- dinosaur -->
    <g class="trex">
       <path ... />
       <path ... />
    </g>
  </div>
</svg>

Answer 1

div не является допустимым дочерним элементом для svg, а дочерние элементы svg (например, g, path, et c) не являются допустимыми элементами HTML. Хотя вы можете принудительно ввести определенные теги, это не принесет вам никакой пользы.

Если вы хотите создать собственный стиль или / или взаимодействие для разных части SVG, вам нужно будет выполнить некоторую ручную работу, чтобы разделить их на соответствующие части и использовать их как встроенные в вашем HTML.

Answer 2

Вы можете это сделать, но результат не будет ни валидным html, ни валидным svg. Что вы можете сделать, так это встроить несколько SVG в страницу html.

Вот так:

<div>
  <svg version="1.1" class="wufoo-ad" id="wufoo-ad-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 40" enable-background="new 0 0 400 40" xml:space="preserve">
    <g>
      <!-- background -->
      <rect class="wufoo-background" fill="#D03E27" width="400" height="40" />
    </g>
  </svg>
</div>

<div>
  <svg version="1.1" class="wufoo-ad" id="wufoo-ad-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 120" enable-background="new 0 0 400 120" xml:space="preserve">
    <g stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none">
      <!-- logo letters -->
      <path transform="translate(10,10)" class="wufoo-letter" fill="#F4F4F4" d="M 39.4 62.6 L 39.4 38.4 L 8.2 38.4 L 8.2 65.6 A 13.363 13.363 0 0 1 7.786 65.73 Q 7.304 65.874 6.644 66.039 A 42.972 42.972 0 0 1 6.6 66.05 Q 5.6 66.3 4.4 66.3 A 7.625 7.625 0 0 1 2.753 66.139 Q 0 65.527 0 62.6 L 0 5.2 A 5.41 5.41 0 0 1 0.325 5.084 Q 0.685 4.966 1.212 4.833 A 25.952 25.952 0 0 1 1.55 4.75 A 9.267 9.267 0 0 1 3.137 4.52 A 10.939 10.939 0 0 1 3.8 4.5 A 7.625 7.625 0 0 1 5.447 4.662 Q 8.2 5.273 8.2 8.2 L 8.2 31.6 L 39.4 31.6 L 39.4 5.2 A 5.41 5.41 0 0 1 39.725 5.084 Q 40.085 4.966 40.612 4.833 A 25.952 25.952 0 0 1 40.95 4.75 A 9.267 9.267 0 0 1 42.537 4.52 A 10.939 10.939 0 0 1 43.2 4.5 A 7.625 7.625 0 0 1 44.847 4.662 Q 47.6 5.273 47.6 8.2 L 47.6 65.6 A 13.363 13.363 0 0 1 47.186 65.73 Q 46.704 65.874 46.044 66.039 A 42.972 42.972 0 0 1 46 66.05 Q 45 66.3 43.8 66.3 A 7.625 7.625 0 0 1 42.153 66.139 Q 39.4 65.527 39.4 62.6 Z M 72.5 22.8 L 72.5 65.6 A 5.938 5.938 0 0 1 72.179 65.717 Q 71.719 65.871 71 66.05 Q 70 66.3 68.8 66.3 A 7.506 7.506 0 0 1 67.204 66.146 Q 64.5 65.555 64.5 62.7 L 64.5 19.8 A 5.41 5.41 0 0 1 64.825 19.684 Q 65.185 19.566 65.712 19.433 A 25.952 25.952 0 0 1 66.05 19.35 A 9.267 9.267 0 0 1 67.637 19.12 A 10.939 10.939 0 0 1 68.3 19.1 Q 71.912 19.1 72.418 21.837 A 5.307 5.307 0 0 1 72.5 22.8 Z M 63.752 2.857 A 5.009 5.009 0 0 0 63.3 5 A 6.039 6.039 0 0 0 63.3 5.066 A 4.819 4.819 0 0 0 64.75 8.55 A 4.758 4.758 0 0 0 66.741 9.752 A 5.947 5.947 0 0 0 68.5 10 A 6.537 6.537 0 0 0 69.364 9.945 A 4.677 4.677 0 0 0 72.2 8.55 Q 73.6 7.1 73.6 5 Q 73.6 2.9 72.2 1.45 A 4.556 4.556 0 0 0 70.16 0.222 A 5.926 5.926 0 0 0 68.5 0 A 6.685 6.685 0 0 0 67.768 0.039 A 4.891 4.891 0 0 0 64.75 1.45 A 4.933 4.933 0 0 0 63.752 2.857 Z" />
      <path transform="translate(100,10)" class="wufoo-letter" fill="#F4F4F4" d="M 54.5 69.1 L 45.9 69.1 L 45.9 37.7 L 8.6 37.7 L 8.6 69.1 L 0 69.1 L 0 0 L 8.6 0 L 8.6 30.4 L 45.9 30.4 L 45.9 0 L 54.5 0 L 54.5 69.1 Z M 93.962 22.908 A 28.25 28.25 0 0 0 87.9 22.3 A 27.977 27.977 0 0 0 84.157 22.542 A 21.548 21.548 0 0 0 78.8 23.95 A 26.073 26.073 0 0 0 78.185 24.213 Q 74.62 25.791 72.5 28.05 A 16.907 16.907 0 0 0 71.2 29.626 Q 70.377 30.747 69.589 32.148 A 37.623 37.623 0 0 0 68.15 35 A 19.011 19.011 0 0 0 67.583 36.389 Q 66.1 40.471 66.1 46 Q 66.1 57.1 71.1 63.7 A 14.968 14.968 0 0 0 74.763 67.149 Q 79.499 70.3 87.1 70.3 A 35.193 35.193 0 0 0 87.461 70.298 Q 90.158 70.27 92.53 69.828 A 21.005 21.005 0 0 0 98.1 68 Q 102.7 65.7 105 62 Q 109.2 55.2 109.2 47.2 A 46.054 46.054 0 0 0 109.163 45.344 Q 109.004 41.389 108.153 38.003 A 24.798 24.798 0 0 0 104.1 29.2 A 15.539 15.539 0 0 0 100.697 25.821 Q 97.852 23.763 93.962 22.908 Z M 87.9 28.8 A 14.237 14.237 0 0 0 84.62 29.161 A 10.968 10.968 0 0 0 81.35 30.5 A 11.041 11.041 0 0 0 78.551 32.925 A 10.01 10.01 0 0 0 77.3 34.9 Q 74.9 40 74.9 45.8 A 38.377 38.377 0 0 0 75.377 52.145 Q 77.274 63.403 86.724 63.786 A 16.668 16.668 0 0 0 87.4 63.8 A 14.181 14.181 0 0 0 90.566 63.463 A 10.667 10.667 0 0 0 93.9 62.1 Q 96.6 60.4 98 57.7 Q 100.4 52.7 100.4 46.8 A 38.377 38.377 0 0 0 99.923 40.455 Q 98.026 29.197 88.576 28.814 A 16.668 16.668 0 0 0 87.9 28.8 Z" />
    </g>
  </svg>
</div>

<div>
  <svg version="1.1" class="wufoo-ad" id="wufoo-ad-3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
    <!-- dinosaur -->
    <g class="trex" transform="translate(100.000000,0.000000)  scale(0.0100000,-0.0100000) translate(-1055.000000,-10080.000000)"
fill="#000000" stroke="none">
<path d="M1055 10080 c-147 -31 -402 -180 -444 -259 -9 -16 -17 -81 -23 -175
l-8 -149 45 -48 c25 -26 45 -51 45 -54 0 -3 -11 -23 -25 -43 -32 -47 -32 -69
2 -104 30 -31 67 -36 97 -13 26 20 36 19 36 -4 0 -10 7 -24 15 -31 9 -8 12
-22 8 -41 -7 -37 19 -69 58 -69 26 0 27 -2 22 -33 -6 -40 16 -67 54 -67 14 0
41 -13 60 -30 18 -16 38 -30 43 -30 5 0 0 -16 -11 -35 -25 -41 -20 -60 21 -83
26 -15 30 -23 30 -59 0 -42 13 -63 51 -83 10 -6 19 -21 19 -33 1 -51 177 -156
240 -143 43 8 110 -14 110 -36 0 -26 36 -58 64 -58 15 0 26 -7 29 -20 3 -11
16 -24 29 -29 21 -8 24 -14 20 -45 -5 -40 9 -63 44 -76 18 -7 22 -16 21 -46
-1 -45 29 -74 79 -74 29 0 38 -6 61 -42 14 -24 65 -82 112 -130 47 -47 97 -99
112 -115 14 -15 41 -40 60 -54 l34 -26 -53 -106 -52 -106 -56 -20 c-54 -21
-91 -28 -274 -52 -230 -31 -255 -36 -314 -67 -32 -18 -66 -32 -77 -32 -10 0
-51 -32 -91 -71 -40 -39 -90 -83 -113 -97 -22 -14 -77 -58 -121 -97 -46 -41
-99 -78 -120 -85 -22 -7 -70 -29 -109 -48 -134 -67 -260 -86 -380 -57 -92 22
-131 19 -162 -11 -23 -23 -25 -31 -19 -80 l6 -54 -29 0 c-17 0 -34 -7 -39 -16
-7 -13 -15 -14 -48 -5 -21 6 -51 11 -65 11 -47 0 -52 -16 -38 -147 11 -110 14
-122 51 -180 53 -83 112 -136 184 -162 56 -21 71 -22 279 -18 237 4 278 11
550 88 157 45 322 59 692 59 l311 0 82 -61 c155 -114 229 -198 270 -304 13
-33 27 -65 32 -72 5 -6 16 -54 24 -105 13 -81 46 -195 134 -458 12 -36 37
-119 56 -185 19 -66 46 -156 59 -200 14 -44 25 -87 25 -96 0 -8 18 -53 41
-100 23 -46 55 -122 72 -168 38 -106 102 -201 282 -416 78 -93 156 -190 174
-215 l33 -45 -25 -3 c-36 -4 -275 78 -397 137 -94 46 -160 69 -407 145 -75 23
-98 42 -162 134 -27 38 -172 309 -216 402 -6 14 -16 34 -22 45 -34 62 -55 112
-64 158 -7 32 -24 68 -45 94 -19 23 -34 44 -34 47 0 4 -14 25 -30 48 -17 22
-30 45 -30 51 0 10 -65 113 -99 158 -11 14 -26 39 -33 55 -6 16 -24 47 -38 69
-113 173 -162 244 -177 256 -11 9 -47 15 -107 16 -50 0 -102 5 -116 11 -50 19
-130 24 -202 12 -99 -17 -130 -33 -126 -68 3 -24 19 -35 126 -90 l124 -64 24
-56 c33 -78 51 -109 97 -167 50 -64 38 -68 -80 -24 -108 39 -151 60 -214 106
-45 32 -54 34 -97 29 -26 -3 -105 -10 -177 -15 -104 -6 -140 -13 -180 -32 -62
-29 -121 -87 -130 -128 -11 -50 6 -61 94 -62 109 0 173 -13 186 -35 5 -10 25
-33 43 -50 35 -33 33 -44 -8 -44 -63 0 -212 -82 -226 -124 -3 -10 -34 -31 -68
-46 -93 -43 -139 -81 -171 -142 -48 -91 -15 -137 79 -109 23 6 68 19 102 28
l60 17 35 -27 c48 -36 125 -52 189 -38 28 6 97 34 153 61 139 69 192 83 291
78 113 -6 155 -28 177 -91 10 -27 35 -72 57 -100 22 -29 47 -66 56 -83 26 -54
92 -100 267 -189 92 -47 182 -99 198 -116 17 -17 58 -75 92 -130 96 -156 142
-190 291 -214 37 -6 93 -54 164 -141 30 -37 139 -102 334 -201 90 -45 206 -89
260 -98 25 -4 113 -30 195 -57 134 -46 162 -52 256 -56 126 -5 118 -12 148
123 10 47 22 89 25 92 3 4 54 -23 113 -59 60 -35 133 -75 163 -87 55 -22 282
-64 418 -77 81 -7 82 -9 56 -84 -12 -34 -15 -65 -10 -127 5 -63 3 -83 -6 -83
-17 0 -207 36 -293 55 -38 9 -128 20 -200 25 -88 6 -150 16 -190 30 -35 12
-98 24 -150 27 -53 3 -104 13 -125 23 -41 20 -152 54 -230 70 -30 7 -136 14
-236 17 -230 7 -261 -1 -349 -92 -33 -34 -74 -69 -91 -78 -52 -27 -141 -115
-163 -160 -13 -27 -21 -63 -21 -95 0 -46 3 -54 25 -64 22 -10 38 -5 135 45 61
32 117 57 126 57 8 0 27 -8 42 -17 23 -16 49 -18 214 -15 157 3 192 1 218 -13
18 -9 30 -18 28 -20 -29 -26 -157 -91 -216 -110 -104 -34 -119 -42 -134 -79
-7 -17 -59 -80 -115 -140 -120 -126 -163 -202 -171 -301 -5 -71 7 -101 45
-116 40 -15 73 4 138 78 32 36 80 82 106 103 42 33 54 37 87 33 43 -6 181 21
227 45 16 8 67 53 112 98 46 46 90 84 98 84 17 0 85 -27 85 -33 0 -2 -17 -16
-39 -30 -47 -31 -136 -173 -151 -242 -6 -26 -16 -57 -22 -68 -6 -11 -14 -52
-19 -91 -4 -42 -19 -96 -36 -131 -25 -55 -28 -70 -28 -177 0 -110 1 -118 24
-142 17 -18 35 -26 58 -26 37 0 53 20 118 151 45 89 81 139 101 139 26 0 111
89 133 140 12 27 32 90 45 140 22 81 30 97 84 158 32 37 73 88 91 114 17 26
39 52 49 57 10 5 46 5 88 -1 77 -10 68 -12 254 62 58 23 124 55 147 71 75 50
75 50 182 38 85 -9 113 -8 186 6 l86 17 38 -26 c50 -35 183 -175 296 -310 50
-60 119 -141 153 -180 35 -39 75 -89 88 -112 l24 -41 -20 -49 c-53 -124 -299
-447 -422 -555 -115 -102 -98 -97 -172 -45 -114 82 -229 105 -346 70 -145 -43
-282 -191 -284 -305 -2 -83 47 -108 144 -74 92 33 213 35 243 6 17 -17 -18
-63 -67 -88 -28 -14 -89 -53 -136 -88 -90 -65 -165 -119 -207 -147 -30 -19
-149 -48 -201 -48 -48 0 -101 -35 -109 -71 -7 -36 -16 -43 -76 -59 -72 -19
-128 -60 -193 -140 -133 -163 -158 -213 -152 -301 5 -70 26 -99 73 -99 17 0
103 21 191 46 131 38 172 46 237 45 94 -1 296 38 384 74 35 14 115 39 178 55
64 16 121 32 126 36 6 3 54 12 107 20 72 10 108 10 146 2 57 -12 129 0 211 37
99 43 140 123 155 304 7 78 14 105 45 166 45 88 102 166 135 182 31 15 43 39
80 164 42 144 111 239 369 513 100 105 144 159 151 185 16 57 12 154 -11 270
-16 83 -31 125 -69 196 l-48 90 5 90 c5 83 2 99 -30 200 -20 61 -45 142 -57
180 -12 39 -33 89 -47 113 -13 24 -23 45 -21 47 1 1 38 21 82 44 84 44 99 46
191 16 22 -7 81 -18 130 -24 50 -6 112 -18 139 -26 27 -8 81 -15 120 -15 39 0
98 -7 131 -15 79 -19 186 -19 260 0 37 10 62 12 68 6 6 -6 5 -33 -2 -73 -26
-150 2 -268 82 -342 24 -23 62 -75 85 -117 41 -74 46 -79 135 -133 134 -81
255 -126 339 -126 47 0 79 6 105 19 21 11 78 25 126 31 73 10 102 9 170 -4 45
-8 120 -18 167 -22 47 -3 110 -14 140 -24 30 -10 90 -25 133 -35 122 -27 164
-75 212 -240 23 -80 27 -113 32 -292 5 -181 4 -203 -10 -209 -9 -3 -54 10
-100 30 -72 31 -95 36 -161 36 -61 0 -86 -5 -124 -24 -112 -57 -199 -195 -209
-331 -5 -64 -3 -78 12 -95 27 -30 56 -25 165 32 l100 52 34 -17 c19 -9 42 -30
51 -46 8 -17 39 -46 68 -64 61 -39 114 -128 102 -169 -15 -50 -57 -90 -129
-122 -80 -37 -139 -84 -163 -130 -9 -17 -33 -51 -53 -76 -79 -95 -111 -203
-90 -304 9 -46 16 -57 36 -62 38 -10 71 3 168 65 l91 59 140 6 c110 4 154 2
206 -10 63 -15 66 -17 75 -52 9 -36 10 -37 64 -40 50 -3 60 1 100 31 25 19 62
40 83 48 39 14 44 21 91 116 28 58 61 221 51 256 -4 12 -28 92 -55 177 -47
152 -48 158 -54 320 l-6 165 41 115 c40 113 41 117 36 220 -5 104 -30 215 -75
345 -12 33 -30 99 -41 146 -19 84 -38 133 -127 314 -24 50 -53 128 -66 174
-41 157 -101 221 -205 221 -49 0 -53 2 -84 43 -18 23 -64 75 -103 115 -58 60
-89 82 -164 119 -52 25 -115 50 -140 57 -38 9 -46 15 -44 31 2 11 7 41 11 68
4 26 13 53 19 59 7 7 12 22 12 34 0 14 12 29 34 42 23 14 42 38 60 78 36 77
104 222 122 257 8 16 14 36 14 46 0 9 7 26 15 39 21 29 42 102 51 171 3 31 12
65 19 76 7 11 16 49 20 84 4 36 11 78 16 95 13 42 42 251 43 306 1 25 5 51 10
58 10 17 10 45 -4 212 -14 176 -26 279 -38 310 -7 18 -4 47 9 100 25 102 23
161 -6 274 -31 120 -33 219 -5 299 11 31 20 72 20 90 0 22 9 43 25 61 13 14
34 59 45 99 11 39 36 106 54 147 19 41 41 98 50 126 18 58 45 119 81 183 14
24 25 56 25 70 0 14 6 46 14 71 7 25 17 81 21 125 4 48 14 92 25 110 10 17 59
149 109 293 50 145 108 296 130 335 21 40 44 90 51 112 17 51 76 169 111 220
15 22 39 58 52 80 44 69 308 341 382 393 131 92 233 151 288 167 30 9 62 24
72 35 23 26 159 110 177 110 8 0 45 15 84 34 38 19 89 40 114 46 59 16 276
103 351 140 33 17 107 42 165 56 58 13 119 31 135 39 70 37 583 49 624 15 12
-10 51 -17 119 -21 73 -4 112 -11 141 -26 22 -11 60 -24 83 -28 24 -4 99 -31
166 -60 67 -29 133 -56 147 -60 13 -4 40 -18 59 -30 53 -36 226 -59 269 -35
20 10 51 78 51 111 0 38 -43 103 -121 185 -44 46 -79 87 -79 92 0 5 -17 21
-37 35 -21 14 -72 55 -112 91 -94 83 -217 153 -452 255 -142 62 -197 74 -497
108 -228 25 -243 26 -392 13 -85 -7 -247 -16 -360 -20 -115 -4 -218 -12 -235
-18 -73 -29 -449 -122 -490 -122 -17 0 -77 -13 -131 -29 -54 -16 -124 -34
-154 -41 -55 -13 -267 -104 -326 -141 -17 -10 -37 -19 -45 -19 -7 0 -42 -18
-78 -39 -36 -21 -82 -44 -102 -50 -19 -6 -52 -27 -72 -46 -20 -19 -58 -45 -84
-59 -145 -73 -550 -499 -738 -776 -43 -63 -88 -128 -101 -143 -13 -16 -27 -40
-31 -55 -3 -14 -19 -50 -35 -80 -15 -30 -28 -60 -28 -67 0 -11 -56 -92 -159
-231 -17 -22 -36 -54 -43 -70 -15 -34 -72 -102 -198 -233 -47 -49 -99 -104
-116 -122 -17 -19 -68 -65 -113 -104 -45 -38 -110 -97 -144 -130 -34 -33 -77
-68 -95 -77 -18 -10 -35 -25 -39 -35 -11 -32 -87 -104 -130 -123 -29 -13 -44
-27 -49 -44 -3 -14 -11 -26 -18 -26 -30 0 -355 -31 -381 -36 -64 -12 -252 -66
-300 -86 -261 -106 -488 -212 -558 -259 -18 -12 -51 -40 -74 -62 l-41 -40 -89
8 c-116 10 -535 6 -643 -6 -187 -21 -420 -97 -485 -158 -16 -16 -45 -33 -62
-39 -18 -6 -48 -22 -65 -35 -18 -13 -65 -41 -105 -62 l-72 -37 -73 29 c-118
48 -117 45 -103 393 10 237 12 419 6 610 -2 69 2 196 9 283 14 164 13 183 -24
452 -17 121 -60 271 -101 355 -55 112 -102 192 -126 218 -37 39 -46 59 -59
132 -6 36 -24 85 -38 109 -277 458 -271 450 -452 538 -69 33 -163 77 -210 98
-154 67 -165 74 -252 152 -48 43 -119 96 -160 118 -40 21 -82 47 -93 58 -32
30 -151 97 -245 137 -111 49 -174 86 -415 245 -362 239 -459 286 -600 291 -49
2 -108 -1 -130 -6z"/>
    </g>
  </svg>
</div>

Кредиты

• Пример шрифта: https://danmarshall.github.io/google-font-to-svg-path/
• SVG динозавров: https://svgsilh.com/tag/dinosaur-1.html