跳到主要內容

[開發]HTML 內插入可縮放向量圖形 (SVG)。

圖片
作者：

　　可縮放向量圖形 (SVG) 功能強大，無需外掛程式或單獨的檢視器即可向網站添加能夠輕鬆擴展的高保真視覺圖形，無論是小而簡單還是大且複雜的圖形，均不在話下。

　　SVG 為原本不足的 HTML 帶入了新的概念 — 利用標籤來做圖。從簡單的直線、曲線、圓形、矩形，到複雜的任意路徑、填充樣式、座標轉換與動畫，我們可以利用標籤的形式來完成。這不光是換了一種影像的儲存格式而已，格式化、向量化的影像格式也就帶表了程式化的可能 － 各式的互動視覺化、視覺圖表都因此而可能，網頁遊戲製作也變得更簡單了。

　　要如何在 HTML 內插入 SVG 呢? 以下範例使用標準 HTML5 標頭 <!doctype html>，以便瀏覽器可以將其作為 HTML5 規範的一部分加以區別。請注意，並非所有瀏覽器都支持 HTML5 的這個方面，它們會將 SVG 標記作為 HTML 標記處理。這種處理方式稱為inline SVG。

 考量到瀏覽器的支援度，建議參考下圖：


範例：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" height="515pt" width="571pt" version="1.0" preserveAspectRatio="xMidYMid meet" viewBox="0 0 571.000000 515.000000">
        <g transform="translate(0 515) scale(0.1 -0.1)">
        <path d="m3484 4951l-6-41-25 20c-14 11-29 17-34 14s-8-31-7-62l1-57 6 58 6 59 26-21c15-11 34-36 43-55 16-35 22-132 8-152-8-13-73-54-85-54-10 0 3 79 18 110 7 14 16 45 19 70l7 45-15-32c-8-18-19-33-23-33-5 0-13-10-18-22-17-39-128-87-225-99-47-5-111-16-142-23-32-7-58-12-58-10 0 5 78 48 110 60 59 22-2 17-65-5-31-11-53-16-51-12 8 13 132 71 152 71 11 0 26 5 34 11 11 8-6 9-63 5-137-10-295-77-377-160-81-81-42-9 44 83 23 24 61 56 85 72 25 16 40 29 34 29-20 0-157-62-215-97-109-65-208-202-234-323l-12-55-1 86c-1 90 15 157 46 191 9 10 14 21 11 24-11 10-76-81-111-154-20-40-39-73-44-72-4 0-9-17-11-37-2-25 0-33 6-24 7 9 12-6 17-45 14-118 105-414 127-414 4 0 8 16 8 36 0 40 18 113 32 129 4 5 8-2 8-15 0-14 11-71 23-127 13-57 20-103 16-103-14 0-72-54-89-83l-18-28-30 53c-33 59-57 126-53 147 1 7-2 10-8 6-6-3-9 0-5 8 3 8-1 21-9 28-7 8-12 20-9 28 3 9 0 11-7 6-8-4-11-2-10 6s-1 22-6 33c-4 10-6 84-3 165 3 80 2 135-2 121-5-14-9-18-10-10s-4 29-7 45c-3 17-6 50-5 75 0 39-1 42-9 21-5-14-12-50-15-80-4-31-10-60-14-64-4-5-41 58-81 139-74 147-74 148-71 218 2 39 5 87 5 108 1 20 5 34 10 31 4-2 7 0 7 5 0 19-14 21-40 5-25-14-27-20-23-54 5-34 2-42-23-61-50-40-91-89-139-170-57-95-82-154-155-368-31-91-60-173-64-182-7-15-4-15 37-3l46 14-16-52c-25-87-69-189-109-257s-151-190-172-190c-7 0-18 14-23 30-6 17-13 30-15 30-12 0-76-38-148-87-112-77-275-155-426-204l-55-18h55c140-1 395 87 545 189 94 63 88 50-12-27-95-73-220-145-291-168-38-12-52-21-50-33 4-21 38-30 120-31 64-1 67-2 87-35 26-42 108-119 150-140l32-17-39-55c-77-108-228-275-337-372-210-188-358-290-661-458-194-106-234-131-234-144 0-15 136-12 205 4 82 20 228 68 296 98 113 51 436 249 455 279 8 14-44 3-159-35-63-20-161-65-252-115-136-73-155-81-204-81-31 0-51 4-45 8 5 5 70 47 144 93 341 211 632 477 825 752 11 15 16 16 39 6 14-7 26-15 26-19s-23-39-50-78l-50-71 52 5c29 3 70 9 91 14 20 4 37 5 37 1 0-11-134-176-205-253-34-36-95-95-136-130-42-35-92-82-111-104-55-60-262-220-367-284-52-31-97-62-99-68-6-18 64-15 154 8 93 23 272 110 399 195 49 33 97 64 105 69 19 10-57-59-132-121-59-49-72-73-40-73 12 0-43-61-151-167-93-93-187-190-210-218-23-27 20 13 96 89s141 136 144 132c3-3 11-2 17 3 13 10 56 21 56 15 0-3-62-69-138-147-134-138-204-223-208-252-3-18 23-19 62-5 15 6 47 12 70 14s47 6 52 10c6 4-5-20-25-51-19-32-76-141-126-243-67-137-100-193-127-217-45-39-113-142-147-220l-24-58 6 78c3 43 8 85 11 95 3 9-2 6-10-8-32-52-63-168-80-303l-5-37h77 77l23 104c22 101 94 332 108 345 4 3 3-7-1-24-28-109-36-166-42-288l-6-137h95 94l17 93c19 110 99 360 151 471 72 157 267 452 290 439 6-3 8-3 4 1-3 4 3 17 14 28s21 18 22 16c2-1 9-13 15-26 11-20 8-28-18-60-35-45-91-99-91-88 0 4 7 21 16 37 8 17 13 33 11 35-5 6-68-140-91-211-40-125-62-364-36-405 13-21 21-8 59 95 38 100 134 297 179 363l29 43 38-103c21-57 50-144 65-195 32-109 47-135 95-157 73-35 181 12 211 91 15 37 15 53 5 113-6 39-18 89-26 112-18 54-13 58 91 58 45 0 109 3 144 7l62 6-16-31c-20-39-20-42 2-42 11 0 13 3 5 8s-6 17 9 42c14 26 17 29 13 10-4-14-8-34-8-45-1-11-16-45-33-75s-37-72-45-94c-8-21-27-47-43-59-33-23-67-92-92-186-10-36-28-81-40-99-13-19-25-57-29-90-13-105-17-97 48-100 64-3 63-4 58 90-3 52 5 73 35 86 14 7 27 12 29 12 11 0 4-60-14-123l-19-68 41 3 41 3 28 89c15 49 32 94 37 99 6 6 14-7 21-34 20-80 42-144 53-154 7-7 7-4 2 10-14 37-65 210-65 223 0 19 41 102 51 102 5 0 13-9 17-21 8-21 8-21 24 3 8 13 34 61 57 106 37 74 61 102 61 70 0-6 3-9 6-6s0 15-7 27c-12 18-9 25 17 58 51 62 58 54 71-87 6-69 19-155 27-192 15-64 15-69-3-98-22-38-26-33-51 62-24 91-26 63-3-47l17-82-42-66-42-67h49c46 0 52 3 95 51 25 28 46 57 46 65 0 7 33 55 73 106 39 51 98 137 131 191 32 53 61 97 64 97s33-26 66-58c34-32 84-71 111-87 28-16 51-29 52-30 2-1-6-43-17-93-12-55-34-116-55-155-19-35-35-69-35-75 0-9 41-12 143-12h142l35 47c33 45 88 92 173 150l38 26 23-22c12-12 52-62 87-111s68-89 73-89c5-1 4 5-1 12-6 6-42 55-81 108s-78 99-87 103c-19 7-47-6-89-41-16-13-30-22-32-21-7 8 18 93 47 158 25 54 38 72 57 77 34 8 47-1 126-98 72-89 132-199 142-261 6-37 8-38 47-38h40l-8 33c-5 17-9 109-11 202-2 166-14 278-34 331-6 14-8 29-5 34 5 8-57 69-112 110-23 16-35 35-39 59-14 81-58 229-99 329-45 112-45 122 0 136 18 5 30-12 92-132 39-75 86-173 103-216 35-90 73-237 68-269-1-12 2-23 7-24 6-1 9 16 7 40-9 109-70 278-173 476-38 74-66 138-62 141 14 12 100 30 175 36 64 5 91 1 213-32 120-32 156-38 249-38l109-1 31-40c17-23 114-139 216-259 102-119 208-247 237-284 101-130 111-57 20 153-50 117-228 412-260 432-6 3-7 1-3-5 13-21-6-13-55 25-44 34-48 39-34 53 14 13 19 11 48-21 18-19 26-27 18-17s-12 21-9 24c8 8 168-187 266-323 45-64 105-157 132-207 83-153 146-370 170-586 19-171 14-160 65-160 35 0 47 5 55 21 30 55 21 347-16 508-8 35-13 65-11 67 5 5 85-222 101-288 8-32 20-104 26-160 17-162 8-148 95-148 41 0 75 4 75 9 0 4-8 19-19 32-13 17-22 56-30 134-24 220-68 384-151 561-41 90-65 118-48 58 5-20 8-38 6-40s-23 22-47 52c-43 55-146 144-166 144-6 0-27 21-46 48-19 26-54 73-77 105-24 31-85 109-137 172s-95 117-95 120 8 1 18-4c21-11 217-44 232-39 9 3-72 108-184 238-11 13-14 19-5 12 9-6 28-13 43-14 31-3 117-93 261-273 101-127 122-150 74-81-19 27-114 144-212 260-200 237-241 286-234 286 3 0 41-18 85-40 147-72 438-162 477-146 17 6 17 8 1 25-9 10-83 58-163 107-81 49-183 115-227 147-93 67-268 225-262 236 3 4-31 43-75 87-71 70-189 204-189 215 0 2 23 2 50 1 28-2 62-1 75 2 24 6 23 10-74 154-54 81-108 166-119 189l-21 41 24 6c14 4 25 11 25 16 0 6 5 10 11 10 5 0 7-4 4-10-3-5-2-10 3-10 4 0 28-30 52-67 156-235 355-460 518-586 96-75 73-49-39 44-138 113-242 227-361 393-103 145-184 273-176 281 2 3 31 0 64-5 65-11 237-14 247-4 3 3-42 31-101 60-150 77-181 103-67 58 127-50 256-83 351-90 90-7 157 1 151 19-2 6-44 25-93 43-141 50-150 54-135 64 8 5 31 2 54-6 78-28 233-53 363-60 140-7 247 1 242 18-4 11-209 80-216 73-2-2 45-19 104-38l109-35-55-7c-78-9-271 35-468 107l-54 20 33 35c26 26 40 33 59 29 25-5 25-5 3 6-19 9-23 20-24 57-1 30-3 36-6 19-6-40-23-34-23 7 0 23 5 35 14 35s17 15 21 40c13 77-42 118-185 139-113 17-134 26-276 121-72 49-157 103-189 121-73 41-147 146-149 213-1 22-3 59-5 81l-2 40-15-39c-8-22-16-41-18-43-10-11-65 102-71 148-13 99-48 219-61 206-3-2 0-17 6-33 6-15 8-45 5-66-6-34-9-37-23-26-13 12-14 10-3-9 9-17 9-28 0-44l-11-21-16 23c-10 13-27 50-39 84-18 49-22 55-22 30l-1-29-29 34c-18 21-33 52-37 77-9 57-31 76-26 22 4-40-7-49-37-30-13 9-54 101-45 101 3 0 18-7 34-15 17-9 30-13 30-11 0 7-47 31-77 40-20 6-23 3-29-33zm80-477c57-124 68-179 72-349 3-126 0-174-13-227-16-64-18-67-35-51-18 16-25 43-10 43 4 0 13-5 20-12s12-8 12-2c0 17-62 85-85 94-19 7-23 19-29 82-4 40-9 84-12 98s10-4 29-39c25-48 36-61 43-50 19 29 2 371-22 452-11 36 6 15 30-39zm-574-120c55-122 198-489 205-524 5-31-1-44-52-116-32-45-63-90-69-100-8-13-18 44-43 237-18 140-43 325-55 412-12 86-20 157-19 157 2 0 16-30 33-66zm1084-90c107-54 276-170 276-188s-22-35-57-46l-28-8 27-1c15-1 40 10 57 24 29 25 30 25 60 7l30-18-54-37c-47-31-55-34-66-21-7 9-25 22-41 30s-26 19-23 24c4 6 1 10-5 10-7 0-55 44-108 98-54 53-118 109-144 122-48 25-63 50-30 50 9 0 57-21 106-46zm-1146-64c6-46 11-54 26-52 11 2 23-2 27-10 13-20 10-96-6-162-12-52-12-74 1-174 8-63 14-121 12-128-2-10-25 1-76 35-40 27-76 51-81 53-11 4 8 144 44 328 41 211 39 206 53 110zm1097 33c33-22 218-203 207-203-10 0-189 53-201 59-9 6-10 10-2 15 6 4 11 17 10 29-1 20-2 20-8-3-8-29-27-35-64-21-23 9-26 14-20 43l6 33-22-27c-26-32-30-33-56-14-17 12-17 15 15 55 33 40 34 41 59 25 14-9 40-28 56-43 26-22 25-21-4 11-19 21-43 40-53 44-10 3-18 12-18 21 0 21 43 10 95-24zm-678-199l24-69-78-71-78-72-19 56c-17 49-17 59-5 77 80 124 112 166 121 157 5-5 21-41 35-78zm-525-194c-2-25-7-48-11-52-4-5-25 1-46 12-22 11-57 26-77 32l-38 11v87c0 48 3 89 6 93 4 3 43-26 88-66l82-72-4-45zm-963 85c28-21 51-44 51-50 0-22-61-197-85-245-14-28-23-50-20-50 8 0 46 79 91 190 24 58 43 100 44 95 0-6 13-19 30-28 25-15 36-16 71-7 22 6 43 9 46 7 6-6-25-113-45-154-8-17-24-34-36-37s-61-28-111-57c-117-67-120-68-106-38 10 21 9 20-9-4-30-37-65-54-141-66-178-28-183-25-102 62 33 35 80 98 105 139 42 69 108 219 124 282 7 30-1 33 93-39zm2326-82l50-48-45 49-45 48 40-6c88-16 150-67 143-120l-3-27-42 31c-24 18-43 29-43 26 0-2 20-19 45-37s45-38 45-44c0-18-78-46-147-52-57-5-67-3-104 22-55 36-179 160-179 179 0 20 19 23 135 25l99 1 51-47zm-229-61c38-38 85-81 104-96l35-27-40 6c-22 3-73 13-114 21l-73 16 6 30c3 17 6 50 6 74s1 44 3 44 35-31 73-68zm-97-42c-25-233-161-487-364-682-33-32-62-58-66-58-7 0-4 141 5 196 3 22 0 67-7 101-13 59-12 63 9 90 26 33 34 28 41-26 3-23 9-41 14-41 11 0 37 84 47 150 7 47 11 55 27 52 11-2 24-8 29-12 17-16-12-165-49-257-20-48-39-95-42-103-4-8 26 28 65 80 85 113 162 257 193 360 16 54 31 83 53 103l31 28-29-18-29-18 6 35c7 30 51 90 67 90 3 0 3-31-1-70zm-451-62c15-15 16-69 1-102-13-27-61-52-129-66l-45-9 45 4c25 2 55 7 65 11 18 7 19 6 5-11-9-11-10-16-2-11 18 11 15-5-7-28-11-12-29-53-40-93-18-60-19-76-9-92 11-19 7-27-46-80-33-33-78-70-102-82-37-20-46-21-80-11-65 20-101 48-122 94-10 24-37 58-59 76-23 18-48 49-56 70s-22 44-31 51c-21 17-10 33 17 26 21-6 22-6 3 9s-18 16 21 16c23 0 44 4 47 8 3 5-19 7-48 4-74-6-131 23-145 75-12 41-1 63 29 63 15 0 17-6 13-38-7-51 21-86 70-86 43 0 64 16 72 55 7 32 25 40 25 11 0-10 6-27 14-38 13-16 18-17 35-7 21 13 51 8 51-8 0-5-18-26-40-46-47-44-51-59-12-39 15 7 46 17 69 21 22 3 49 13 60 20 25 19 30 18 44-6 9-18 9-20-7-11-19 11-56 4-48-9 3-5 18-9 35-9 18 0 29-5 29-14 0-17-26-40-34-28-3 5-19 7-37 4l-32-5 24-18c39-30 61-23 97 30 25 38 31 54 26 79-5 24-2 33 14 43 11 7 18 18 15 24-2 7 2 19 10 26 7 8 11 21 9 28-3 8 8 2 24-13 40-37 70-43 102-19 42 31 50 67 24 102-11 16-18 31-15 35 10 10 38 7 51-6zm-1081-278c26-16 55-30 66-30 54 0-33-57-109-71-31-6-53-4-78 6-56 24-125 19-168-10-36-24-41-25-224-25-168 0-193 2-247 22-33 12-56 23-51 25 5 1 97 11 204 22 165 17 495 73 509 87 12 12 56 1 98-26zm-775-113c42-15 179-75 305-135 258-124 403-179 569-219 111-27 114-29 114-55 0-16-5-28-12-28-38 1-141 30-156 43-32 29-91 47-154 47-46 0-92 10-168 36-106 36-232 94-257 119-24 25-237 133-292 149-130 38-240 10-241-62 0-49 46-102 160-185 15-10 4-7-25 7-175 85-233 254-104 303 52 19 171 10 261-20zm660 2c22-11 86-55 142-97 56-43 123-88 149-102 40-22 47-29 47-56 0-17-3-34-7-37-11-12-54 22-138 107-110 113-152 139-226 143-52 3-62 1-84-21-45-45-28-99 42-135 32-16 36-14 19 11-29 42 25 67 63 29 24-24 17-69-13-82-34-16-130 24-162 66-48 64-38 162 19 185 39 16 106 11 149-11zm1186-133c-3-67-9-130-15-140-9-16-15-11-44 40-19 33-37 73-40 89l-6 30-2-28c0-17 15-56 39-97 39-67 49-103 31-114-5-3-32 30-61 74-51 77-52 80-45 132 4 29 15 61 24 72 15 17 16 17 22-10l7-29 1 33c0 18 6 32 14 32 6 0 23 17 36 37 21 33 24 34 33 18 7-11 9-67 6-139zm-521 107l38-30-3-169c-4-177-12-228-39-238-9-4-54-4-101 0-79 6-87 5-143-21-42-21-62-26-70-18-15 15 7 376 25 411 36 69 104 104 193 99 52-2 69-8 100-34zm851 5c-1-13 5-77 12-143l13-120-32-80c-17-44-53-109-80-145s-48-68-46-71c3-5-98-59-110-59-2 0-2 7 1 15 4 10-6 20-30 32-34 16-36 19-36 66 0 35-8 64-27 99-27 49-27 50-8 64 104 74 205 177 298 306 23 32 43 58 43 58 1 0 2-10 2-22zm-1501-78c38 0 50-6 94-47 56-52 56-52-32-72-37-8-38-8-41 22-4 43-48 74-85 61-21-8-27-16-25-33 2-21 0-22-15-10-27 21-33 32-33 63 0 28 0 29 46 22 26-3 67-6 91-6zm1608-102c63-82 106-128 115-123 4 3 42-48 85-113 43-64 93-136 111-159 131-161-156 98-320 290-58 67-58 67-51 117 4 28 8 50 9 50 2 0 25-28 51-62zm-574-37c12-16 21-33 21-37-1-5-18-14-39-21-29-9-31-11-8-7 17 3 37 7 45 9 11 3 34-24 73-88l58-92-5-70c-11-125-29-172-88-232-29-29-55-53-58-53-8 0-4 255 4 268 4 6-3 30-15 53l-21 42-25-49c-14-27-28-53-33-59-4-5-10-19-12-30-3-18-5-17-22 8-24 36-56 132-56 168 0 30-14 46-26 28-11-19-24 13-13 33 6 11 21 18 38 18 26 0 29-4 36-46 12-84 18-88 70-48 29 22 60 64 36 50-5-3-11 4-14 15-5 17-2 20 14 16 28-8 23 12-7 23-15 6-22 14-18 22 5 7 2 9-9 5-8-3-33-9-54-12l-38-6 55 49c30 27 60 54 65 60 16 17 23 14 46-17zm841-86l101-3 46-53c25-30 89-98 142-151 53-54 93-98 91-98-3 0 7-13 23-30 16-16 25-33 22-37-13-13-173-15-229-4-67 14-92 36-179 159-63 88-150 240-130 228 6-4 57-9 113-11zm-1769-63c47-27 55-60 34-135-10-34-32-111-49-172l-30-110 11-135c12-145 13-290 2-330-9-35-62-58-162-71-46-6-90-16-97-22-7-5-15-7-18-4s-7 52-9 109c-1 57 0 77 2 46 2-32 9-58 15-58 14 0 0 132-15 142-6 3-15 64-20 135-9 123-9 131 16 209 14 45 33 135 42 199 9 65 20 127 25 139 29 76 168 108 253 58zm-581-157c-8-16-36-62-63-100-39-57-59-76-103-98-66-32-123-81-182-159-33-42-54-60-82-68-46-13-182-13-182-1 0 6 26 34 58 63 143 132 210 201 297 308l93 115 49 3c26 2 64 6 83 10 32 7 35 6 41-17 3-15-1-39-9-56zm1968 4c0-60 82-293 155-440 19-39 34-73 33-74-2-1-68 2-148 5-96 5-157 12-182 23l-37 15 36 84c51 121 78 214 87 298 3 36 39 119 48 114 5-3 8-14 8-25zm-832-91c22-104 33-179 27-188-5-8-65-15-65-7 0 1-7 49-15 107-14 103-14 105 7 123 11 9 24 17 28 17s12-24 18-52zm758-10c-9-57-61-227-91-293l-23-53-34 16c-31 15-36 23-45 77-6 33-22 84-37 114-14 30-26 55-26 56s27 21 61 45c65 46 139 79 178 80 22 0 23-2 17-42zm-237-147c23-55 44-143 39-165-2-12-21-6-87 27-118 60-120 66-46 132 33 30 63 54 66 55 4 0 16-22 28-49zm-1443-8c-7-29-46-90-98-151-16-20-36-32-51-32-13 0-45-11-70-24l-47-23 37 51c105 146 126 168 177 192 27 13 52 21 54 19s1-17-2-32zm1389-146c107-60 207-101 286-118l48-11-26-39c-22-34-30-39-52-34-14 2-59 9-99 15-78 11-163 42-184 67-13 16-9 21 53 66l24 17-30-14c-16-8-56-38-88-66-55-50-58-51-51-24l7 29-23-20-24-20 24 40 24 40-34-25-34-24 37 48c20 27 37 56 37 64 0 9-13-4-28-29-16-24-39-53-52-64-18-15-15-8 10 28 34 47 34 49 15 63-10 8-22 14-27 14-4 0-14 13-22 28-11 22-12 36-3 69l11 41 50-43c28-23 96-68 151-98zm-458 48c7-19-22-53-57-68-14-5-54-13-90-18-36-4-92-10-125-14-83-9-55 8 60 37 49 12 80 24 69 26-19 3-117-16-169-33-17-6-18-5-3 4 9 6 45 18 80 27 34 9 70 22 78 29 30 26 147 34 157 10zm1058-11c6 2 43-42 83-98 70-97 72-101 49-104-17-2-45 12-90 45-36 26-77 56-90 65-14 10-32 37-40 61l-15 44 47-9c25-4 50-7 56-4zm-2075-100c53-21 51-34-7-34h-48l35-18c40-19 41-31 22-142-18-97-14-232 8-350 11-58 20-144 20-191 0-76-3-88-23-107-12-12-47-26-77-33-30-6-72-22-93-35l-37-24-11 27c-5 15-11 67-12 115-2 66-6 91-18 100-19 15-49 158-49 229 0 25 9 81 21 125 11 43 23 111 26 149 3 39 12 82 19 97 17 34 72 76 121 94 49 17 55 17 103-2zm2070-85c74-27 104-32 230-38 124-6 152-11 192-31 54-27 78-66 78-128 0-70-8-76-44-29-17 23-51 52-76 65-41 22-53 23-150 18-337-20-319-20-405 8-52 18-89 24-109 20-28-6-28-5-22 22 10 42 56 104 80 109 12 2 30 6 41 8 52 11 107 4 185-24zm-2320 7c0-22-74-161-105-198-15-18-48-44-73-56l-45-24 28 49c16 26 55 88 87 137 32 48 58 92 58 97s11 9 25 9c15 0 25-6 25-14zm1692-73c18-16 21-16 49 1 29 17 31 17 57-1 18-12 53-20 107-23l80-5-4-70c-2-38-4-71-6-73-3-3-245 17-279 24-27 6-28 8-12 19 9 7 55 19 102 25 89 13 113 25 67 36-15 4-40 14-55 23-26 14-30 14-57-2-25-15-30-15-41-2-8 10-17 12-30 5-30-16-53 23-28 48 16 16 28 15 50-5zm-1858-34l24-11-36-57c-21-31-48-81-62-111-13-30-25-57-26-58-9-13-48 16-60 44-21 50-18 84 6 84 11 0 30 10 42 22 19 19 22 20 33 5 7-10 16-17 21-17 4 0 3 5-4 12-17 17-15 35 10 68 25 35 20 33 52 19zm1376-116c-56-63-99-149-100-200 0-28 4-34 28-39 15-3 61-16 102-29 156-49 274-55 370-21 71 27 74 27 27 1-105-57-198-54-411 11-83 25-130 34-154 31-58-10-154-61-220-118-155-132-195-152-317-162l-70-6 74 14c119 23 203 69 315 174 53 50 101 91 106 91 6 0 10 4 10 10 0 5-21 3-47-5-27-8-50-15-53-15-2 0 16 20 40 45s50 45 58 45c7 0 19 15 27 34 15 37 35 56 35 35 0-10 3-10 12-1 10 10 10 15 1 20-8 5-6 14 7 32 11 14 20 20 20 13 0-6-4-15-10-18-5-3-10-11-10-16 0-6 5-7 11-3 6 3 3-8-5-25-21-41-37-81-31-81 10 0 55 101 49 111-3 6 5 22 17 36 22 24 22 26 4 19-18-6-18-6-5 8 13 13 137 63 163 65 5 1-15-25-43-56zm413-69l16-31-49-23c-56-26-106-28-150-5-59 31-31 79 75 130l70 33 11-37c6-20 18-50 27-67zm-1949-29c10-15 26-29 36-32 14-4 18-21 24-95 3-50 6-110 5-132v-41l-17 25c-9 13-27 35-39 48-33 36-51 152-44 277 3 50 3 50 10 13 4-20 16-48 25-63zm3232 69c23 9 268-276 334-387l22-38-158 80c-154 78-161 83-222 157-35 41-66 73-69 70-4-3-12-1-19 5-10 8-6 22 19 69 29 53 34 57 56 48 13-5 30-7 37-4zm-2982-12c29-17 29-18 27-102-1-47 5-118 14-158 19-92 19-136 0-152-8-6-44-16-80-20s-76-15-89-24c-13-8-26-12-30-9-3 4-6 40-6 80 0 41-5 117-12 169-17 140 8 196 100 224 40 12 44 12 76-8zm1873-298c20-70 26-119 30-229 2-77 1-158-4-180-8-37-15-43-102-92-51-29-154-98-228-153-84-62-139-98-145-92-11 11 20 182 33 182 4 0 12-12 17-27 6-16 11-21 11-13 1 9-6 26-15 38-19 28-12 62 22 107 13 17 24 36 24 41s-9-4-20-21c-26-39-25-35 10 92 18 62 39 117 53 132 12 14 15 20 6 13-14-10-20-10-33 3-9 9-16 22-16 28 1 25 40 98 50 92 5-3 10 1 10 9 0 9-5 16-10 16-13 0-70-88-70-107 0-8-8-28-17-46l-17-32-7 35c-6 34-6 33-8-11 0-28-7-52-16-59s-16-11-18-9l-22 44c-21 43-49 54-84 35-21-11-86-98-79-106 3-2 19 18 37 45 33 52 57 67 90 56 26-8 45-58 39-103-8-56-48-185-56-177-4 3-12 21-19 38l-11 32-1-45c0-25 3-62 8-83 9-36-4-107-19-107-12 0-146 144-179 193-29 43-31 51-22 80 6 18 31 52 55 76l43 43 7-46c11-69 25-46 19 28-5 54-1 81 23 153l28 88 6-55c3-30 10-55 15-54 6 0 26 22 45 50 19 27 43 60 52 74 10 13 21 21 25 16 4-4 13-37 19-74 7-37 13-57 13-44 1 12 7 22 16 22 8 0 33 18 55 40s46 40 54 40 16 3 18 8c2 4 28 15 58 25 31 9 85 34 120 56 36 22 69 36 73 32 4-5 20-48 34-97zm-2127-15c0-5-34-55-77-110-42-56-100-140-130-188-58-94-129-160-222-210-75-40-161-73-161-62 0 17 70 174 116 259 51 97 133 214 145 206 5-3 28-6 51-6 33-2 63 9 134 45 51 26 100 57 109 67 17 19 35 19 35-1zm1350-59c-22-22-54-83-64-122-3-14-20-51-38-81l-32-54-135-6c-74-4-137-4-139-2-3 2 3 16 12 30s13 25 9 25c-5 0 42 29 102 63 61 35 150 87 200 115 96 56 117 64 85 32zm911-635c101-149 143-243 131-293l-7-32-34 70c-32 68-174 248-217 277-18 12-27 10-80-16-32-17-83-42-112-56l-53-26 12 23c28 54 55 81 132 133 120 81 121 80 228-80z"/>
        <path d="m2960 3301c0-47 25-87 61-100 39-14 54-14 101-1 35 10 39 16 54 66 9 31 14 57 12 60-3 2-31-1-64-7-57-11-111-8-146 6-15 6-18 2-18-24z"/>
        <path d="m4561 2609c119-113 464-301 697-379 137-46 321-59 297-21-3 6-46 31-96 56-118 60-289 162-364 217-33 24-76 54-95 67l-35 23 30-27c49-43 251-175 383-249 134-76 146-101 28-59-73 26-253 118-364 185-61 37-140 67-326 123-81 24-106 37-172 85-11 8-3-1 17-21z"/>
        </g>
        </svg>
    </body>
</html>

瀏覽器的呈現如下：

這個網誌中的熱門文章

[娛樂]玩了多年的撲克牌，其實背後是結合工程、歷史、設計的大學問！

作者：
　　全世界各地的人們都知道撲克牌，也都有和撲克牌打過交道，幾乎每個地方都宣稱撲克牌是自己的發明成果。中國人認為撲克牌最早起源於十二、十三世紀南宋時期傳出的中國的葉子戲（按照四季分為四種類別）。法國人則認為撲克牌是由塔羅牌演變而成，而英國人則表示自己是在所有經過認證的記錄資料中最早提到紙牌遊戲的國家。 　　現在，大家可能都知道怎樣玩「二十一點」或者是橋牌，但很少有人會靜下心來想一下，一副撲克牌其實是工程學、設計和歷史多方面融合而成的一個奇蹟。撲克牌不僅是一種休閒娛樂時的消遣工具，也是高額賭博和魔術技巧的練習和展示工具，不僅是一種數學概率模型，甚至有時候也會被當作貨幣或者是機密訊息的傳播媒介。 　　在這個過程中，撲克牌不同起源的獨特之處也展現了出來。撲克牌的名稱、顏色、標誌和設計根據不同的出處以及玩家不同的想法而發生變化。這一張張的圖形卡片不僅僅是玩具，或者是工具，他們更是展現不同習俗的一種文化印記： 　　有關撲克牌的誕生地一直眾說紛紜，外界也沒有達成一個確定的共識，但就像火藥、茶和瓷器這些發明一樣，幾乎可以肯定的是撲克牌也是起源於東方。國際撲克牌協會（IPCS）主席 Gejus Van Diggele 也表示：「學者們和歷史學家對撲克牌的確切起源存在分歧，但他們普遍認為撲克牌是由東方向西方進行擴散傳播的。」 　　中國唐朝時期有史料提到了一種紙牌遊戲，雖然這種遊戲更像是現在的多米諾骨牌，但專家認為這是有關紙牌最早的書面記載材料。歐洲 14 世紀末期的一些參考文獻曾提到一種「撒拉遜人（阿拉伯人的古稱）玩的遊戲」突然傳入歐洲，這表明紙牌不是來源於中國，而是來自阿拉伯半島。 　　此外，還有一種說法是，紙牌最早是由游牧民族從印度帶來的一種能夠預測命運的卡片，為紙牌的起源打上了更為久遠的一個印記。但無論是哪一種起源，應該都是有一定的商業契機促進了紙牌在遙遠的東方與歐洲之間的傳播，與此同時印刷技術的發展也加速了紙牌跨國界的生產和傳播。 　　在中世紀的歐洲，紙牌遊戲多是與喝酒、賭博還有其他的一些陋習聯繫在一起。由於紙牌遊戲傳播的廣泛性，以及它給當地所帶來的破壞性，當局決定禁止紙牌遊戲。歷史學家 Michael Dummett 在他的《塔羅牌遊戲》一書中提到了巴黎的一項法令，禁止公民在工作日玩紙牌。後來，紙牌遊戲被教會視為異端邪說，傳教士也紛紛遊說，認為「
閱讀完整內容

[遊戲]中國網友跟魔獸世界說掰了！動視暴雪分手 14 年夥伴網易，出了什麼事？

作者：
　　動視暴雪上週宣布，2023 年 1 月與網易的授權合約到期後，將不再續約，終止雙方長達 14 年的合作。這代表包括《魔獸世界》、《爐石戰記》、《魔獸爭霸 III：淬鍊重生》、《鬥陣特攻》、《星海爭霸》系列、《暗黑破壞神 III》和《暴雪英霸》等熱門遊戲的中國玩家，只能放棄苦心經營的遊戲成果。 　　未獲動視暴雪授權續約的消息一出，網易股價在港股應聲下跌了約 11％。網易執行長丁磊回應表示，在和暴雪洽談續約的過程針對關鍵條款存在重大分歧，因此未能獲得授權續約。 　　不過，動視暴雪和網易在今年攜手推出的手遊《暗黑破壞神：永生不朽》，因為雙方的協議是獨立於《魔獸世界》等遊戲的授權外，因此並不影響未來在中國的發行計畫；同時原訂今年在中國推出的《魔獸世界：龍之軍團》、《爐石傳說：巫妖王進行曲》和《鬥陣特工 2》也將不受影響。 　　過去 14 年來，網易不僅為動視暴雪在中國發行數款熱門長銷的 PC 遊戲，隨著手機遊戲蓬勃發展，近年更將合作領域擴展至手遊市場，合作關係十分深厚。 　　而從暴雪的新聞稿可見，雙方停止授權續約是因為對於協議中「符合暴雪營運原則以及對玩家、員工的承諾的條款內容未有共識」而造成，因此推測兩家大型遊戲發行公司終止主要的授權合作，與中國監管單位對科技公司內容及業務縮限有很大的關係。 　　中國遊戲市場才剛走出監管單位長達數月暫停審核新遊戲的狀況，這個新變化無疑是雪上加霜。 　　中國政府近年來雷厲風行整肅遊戲產業，不僅暫停遊戲版號審查（在中國發行遊戲必須先經過政府相關單位的內容審查核可後方可上線）、限制未成年上線玩遊戲的時間等，以嚴格的手段把控市場發行遊戲的數量及內容，對於想進入搶攻中國市場大餅的海外遊戲公司來說，更是嚴格把關，不僅一年只開放一次審核申請，在內容審核上更是掐緊遊戲商的脖子。 　　但就算是這樣，中國，背靠著人口優勢，遊戲產業的成長力道仍十分強勁，也讓海外遊戲商無不努力排除萬難搶佔中國市場。但若是如此，為何動視暴雪會直接放棄與網易的長期授權合作呢？ 　　從動視暴雪的新聞稿提到「正尋找替代方案，讓動視暴雪的熱門遊戲能重回中國」可推測，動視暴雪正積極尋找替代網易的發行合作夥伴。事實上，動視暴雪過去持續透過不同的遊戲開發或發行專案，多元地與不同的中國遊戲公司合作，要找個網易的「備胎」看似不難，但實際上中國的大型遊戲公司網易、
閱讀完整內容

[開發]如何讓 Unicode 圖案 (特殊符號) 在網頁上正常顯示？

作者：
展示了許多可以取代網站小圖示的 UNICODE，其優點非常顯而易見： ① 字元的傳輸量遠低於圖片的傳輸量。 ② 可以減少許多小圖示的 http 請求量。 那麼接下來的問題會是，要怎麼讓網站所使用的 UNICODE 表情圖案、特殊字元，都能讓所有訪客看到呢？ ⑴ 符號數量。 符號數量越多，代表字型檔案越大。目前 Unicode 各國文字的數量太多先略過，屬於圖案的部分超過一千個，持續有新圖案推出。 ⑵ 編碼為 UTF8。 1 2 3 4 5 <!-- HTML4 --> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" > <!-- HTML5 --> <meta charset= "utf-8" > ⑶  使用方式 使用 Unicode 的話，這一切就能懶人化，先查閱 Unicode 特殊符號一覽表，找到對應的圖案，例如西洋棋黑騎士圖案，那麼在網頁想顯示的地方，直接擺上 Html 代碼： 1 &#9822; 輸入以上字元就行，但是為方便維護，建議還是將該內容直接貼上「♞」。 注意：在使用不同的字體時，渲染出來的符號可能會有所不同，因此，iOS 和 Android 將一些unicode字元轉換為表情符號。在您使用這些 unicode 字元之前，最好測試一下它們，確定不會出現在不同瀏覽器表現不同的情況出現。
閱讀完整內容