svg中的外部引用图像在转换为base64并嵌入img标记时未显示

时间:2013-12-28 14:13:06

标签: svg

我有一张svg图片。 首先,我将该图像转换为base64字符串。 然后我在img标签中显示base64 svg字符串。

问题是当我引用svg文件时,svg中的图像正在显示。 但是在将它转换为base64时却没有显示出来。

问题仅出在mozilla。

<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iN2luIiBoZWlnaHQ9IjRpbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHJlY3Qgc3R5bGU9InBvaW50ZXItZXZlbnRzOm5vbmUiIGZpbGw9IiNGRkYiIHN0cm9rZT0iIzAwMCIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSI+PC9yZWN0PgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiNGRjAwMDAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1IiB4PSIxMjIzIiB5PSIxMDIxIiB3aWR0aD0iNDM0IiBoZWlnaHQ9IjIzMCIgaWQ9InN2Z18yIi8+CiAgPHJlY3QgZmlsbD0iI0ZGMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1kYXNoYXJyYXk9Im51bGwiIHN0cm9rZS1saW5lam9pbj0ibnVsbCIgc3Ryb2tlLWxpbmVjYXA9Im51bGwiIHg9IjExOTciIHk9IjEwMTciIHdpZHRoPSI0MTUiIGhlaWdodD0iMjMxIiBpZD0ic3ZnXzQiLz4KICA8cmVjdCBpZD0ic3ZnXzYiIGhlaWdodD0iMTIiIHdpZHRoPSIyNCIgeT0iMTI5MyIgeD0iMTQ2NiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiNGRjAwMDAiLz4KICA8cmVjdCBmaWxsPSIjRkYwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNSIgeD0iMTg5IiB5PSI0NCIgd2lkdGg9IjE1MyIgaGVpZ2h0PSIxMDciIGlkPSJzdmdfMSIvPgogIDxyZWN0IGZpbGw9IiMwMGZmZmYiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtZGFzaGFycmF5PSJudWxsIiBzdHJva2UtbGluZWpvaW49Im51bGwiIHN0cm9rZS1saW5lY2FwPSJudWxsIiB4PSIxNzMiIHk9IjE1NyIgd2lkdGg9IjE5NCIgaGVpZ2h0PSI2MiIgaWQ9InN2Z18zIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjczIiB3aWR0aD0iMzA4IiB5PSIyMjAiIHg9IjExOCIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiNGRjAwMDAiLz4KICA8aW1hZ2UgeD0iMjE5IiB5PSIzNyIgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNjciIGlkPSJzdmdfNyIgeGxpbms6aHJlZj0iaHR0cDovL3QyLmZ0Y2RuLm5ldC9qcGcvMDAvNTUvOTkvNzUvNDAwX0ZfNTU5OTc1MzZfalRHVGdJMXJZQzhnb2xiSUF1ejNiR01zdDVBaHdUOVYuanBnIi8+CiAgPGltYWdlIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvanBlZztiYXNlNjQsLzlqLzRBQVFTa1pKUmdBQkFRQUFBUUFCQUFELy9nQTdRMUpGUVZSUFVqb2daMlF0YW5CbFp5QjJNUzR3SUNoMWMybHVaeUJKU2tjZ1NsQkZSeUIyTmpJcExDQnhkV0ZzYVhSNUlEMGdOelVLLzlzQVF3QUlCZ1lIQmdVSUJ3Y0hDUWtJQ2d3VURRd0xDd3daRWhNUEZCMGFIeDRkR2h3Y0lDUXVKeUFpTENNY0hDZzNLU3d3TVRRME5COG5PVDA0TWp3dU16UXkvOXNBUXdFSkNRa01Dd3dZRFEwWU1pRWNJVEl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeS84QUFFUWdBUEFCUUF3RWlBQUlSQVFNUkFmL0VBQjhBQUFFRkFRRUJBUUVCQUFBQUFBQUFBQUFCQWdNRUJRWUhDQWtLQy8vRUFMVVFBQUlCQXdNQ0JBTUZCUVFFQUFBQmZRRUNBd0FFRVFVU0lURkJCaE5SWVFjaWNSUXlnWkdoQ0NOQ3NjRVZVdEh3SkROaWNvSUpDaFlYR0JrYUpTWW5LQ2txTkRVMk56ZzVPa05FUlVaSFNFbEtVMVJWVmxkWVdWcGpaR1ZtWjJocGFuTjBkWFozZUhsNmc0U0Zob2VJaVlxU2s1U1ZscGVZbVpxaW82U2xwcWVvcWFxeXM3UzF0cmU0dWJyQ3c4VEZ4c2ZJeWNyUzA5VFYxdGZZMmRyaDR1UGs1ZWJuNk9ucThmTHo5UFgyOS9qNSt2L0VBQjhCQUFNQkFRRUJBUUVCQVFFQUFBQUFBQUFCQWdNRUJRWUhDQWtLQy8vRUFMVVJBQUlCQWdRRUF3UUhCUVFFQUFFQ2R3QUJBZ01SQkFVaE1RWVNRVkVIWVhFVElqS0JDQlJDa2FHeHdRa2pNMUx3RldKeTBRb1dKRFRoSmZFWEdCa2FKaWNvS1NvMU5qYzRPVHBEUkVWR1IwaEpTbE5VVlZaWFdGbGFZMlJsWm1kb2FXcHpkSFYyZDNoNWVvS0RoSVdHaDRpSmlwS1RsSldXbDVpWm1xS2pwS1dtcDZpcHFyS3p0TFcydDdpNXVzTER4TVhHeDhqSnl0TFQxTlhXMTlqWjJ1TGo1T1htNStqcDZ2THo5UFgyOS9qNSt2L2FBQXdEQVFBQ0VRTVJBRDhBNStSQUltN2RxdDZINFd2ZGN2VmxqVVEyVWJEemJpVDdxNDdEMWIyRlB0YlQ3Yk9rTzhJR1BMSHNLNnJ4VEhLTkp0Tk10SmpEYlc2WkNJdkxudVRtdU9DdWRMMkpvb1BER2orWW9hTy91TVkvZkVGZndVZFBxU2FoZlhOSHRJWlRKNGR0cFlqZzc0WFlFZHNjbmpyWGswZm5uV0FzYzNtK1cvellHUVBvSzZiWHZFc2VtTEhGQ1V5b0RNUXBPVGpJQkJ6My9XdDFGR1RaMk4zNGZqbWVHNTA1aEpaemtkT3NXZXhIOGpXNXJJZzBiU0lyZUFBU0VZK3RjMzhPNys4dExON3k1RWpOSzJJZzR6dEJPZW5VZGZ3RmRYcUhpT2R6aWJUNDVWeG5jMFFLakp4M0dheWxUVnpTTXJJNGlkRWExUmxQekU0WWVuT2FydzZmTmR5Q0tDSm5jOWdLN2RKdkRyZkplV0Nvd0dTVlpsSlBzTTF6V3UrSWJUVHIyenNkSUVrVWR3NTNzamdzMlBmMHlPM3ZVeHBNbGpiYnd2cTBEbVdTeG5YNVR0K1R2MnJIdjdTNGlsSXVZNUVrOUhCQnJWMWp4QnFlbTJKbGt0NEdqTERhV085ajZuMC93cXhwWGlPdzF5TnJDOHRpUklBVWRkdTROZ0U3ZlQzcS9aTGNrNTYwdVRheWVZcHd3RmJPb3hYOXhwUW5uRHhoa3lBMlI4dmJKNzF5dDlxZDFiNlIvYWtySkhPTnJNNGpHRjVHTUQxL3dycnZCbXQySGlxYVRUb2J5NUpNZVZOempFait2c2ZiNjBvTHFhelZrb25LNkRvMHFUVDNMZVZsVGtKSXVTQWUrTzFRYVI0VG0xN3g0WGNNOXRBQTVQWjVNOEQrZjVWM1UzaDZQU3BaeE5PNGxkc05HZnZBL3dCYXR1OFhnalRFbkFtZHIrZFlneWo1OXpBN2NjSHBnL25XaW10a1o4ajNaMDRzOU8wK0g3SkQ4MlFGenRHQ0JnL1Vpbnl5d05CR3JPbThyeUY3bi9JTll0eGZXbGdycmVKUGRYY293WTRVQmJIZGljZ0FmajlLeXpxdG5MYU5jMjB4Q2NqYXd3eUVkVkk3R21BL1hiYU5MTjJTTDV5QUVVTnpnRHFPZWY4QVBwWGkrdXZkMldzUkdacEdtUnkwVG94R0FUeUFhOVpoMWM2Z2lyTWdqVldCQkQ4c09PUUs0ZnhEb2tFdW9wY3lsMFFFUHU1K1U4Wi9XbXR5Wk82S1Y1YjZ6Y1dTWGh1UEx0bWpDYkNtTnc5UWEwZkI4TnhiMzhUL0FDTkRIbHNyOTdKNHorRmRJbHdJL0QxenNaSkl4RVA5YjY0NFBURlZ2QzJuckpLdDQ2ZVhGbk1tZXFzT0RqL1BTbTBKUG9jeDhRdFJqa2puc1lRQkh2QndQYXVYOEszMm8rSHZFRVlSSGlrYmE1QkhicURXbGNXamFycjF0Q3pGaE5LTjMwNm45QWE3cTkwcUdaaGM3RkVrYTR5ZWhVZGpXRVpLSzVUcHF4Y256SGVhWjR6MHp4Q3NVT3Iyb0V5QWVYTU9Hei9uSEZRYTg5N2U2NWJhWFpUQUNUSGxOdHpqR2MvU3NmdzdwOWxNNFdVRVo0VWpzYTJOYzBxN3NvRXVRZHpLckp2QjI0ejA1SFFVMDF6R2RueW5uWGlIeDlDbXYzVnZCUGtKSVl6SW5Sc2NaL1NxMGVvSk5idmZ3UnZOQnZIbTQvaWJCNVA2RE5jcDRoOEgzbW42bXFwRVdpa1FQdlE1Qnp5TVo5cTZ6dzdmeGFKcDBlaXRCL3Bjc2JTUEk0REtvN0w5YTJ1akpwbHpSb0lwdFFudkpMbVVSekxoTFk5SXp3U1JnNEhRVnNYdHV0MWJLSk9wYmMyRDBKNjF6ZWx5UVd0eSt3S2Q3Zkx4MDVQOWF0NnhyUzJXbWxFa1VUU2t4b1Q3OVQrQS9wU0E2R3dsMC9VZElLcGhvem1HVlIvc0hqK241MHMxd2kyNHRvRjJ4cWVudDAvcFhEYUJyWnM3bFU1RnU0L2VMakFQUVorditGZGxzVmlDaHlwR1FmVVZsVnVqYW5abUJvK293MnR5bWpwQkc5eXVXbWJabGcyRGdBK3c0cWJ4Sk5kR3greHhJd2FVWmNyeVFQU3ZhTEx3Ym9hM3gxS08wRWQxS0dEc2h4bjhLOGs4UWFjbGhmYXNZcDVtSllnYml2SEhiQUZUTFRWRncxZG1ZL2hEeFBLWWpCY1pFc0w3QS9UUC93QmV2WjlQMVczMUxSSlV1TmhSaytjdWVBUDhPQlhqOWhwZHRGNGFCQUpjbHBpNTY3c2tmMHJRKzMzRnY0V3VHUi80UXB6M0ZEVjJUdG9VUEZHcmFkWnRLbHBxU3p4b1Q1WXdXSyt3T09hNGFQWFlvNUpHTFBKTEoxa1lIUDBxTFZTVXZsYk9kNFptRGNqZ1ovTG1wVGF3aVJ5SXhsWFpSK0dQOGEzNVRCc21nMS95L3dEajNnY3NRUUF4d1ByVk4zdWJtNlY3aHkwbkdBT0FQOG1wWTRVVURia0J1TUE0eDEvd3FDUmkwcmduaFR4VHRZVnkvSE1WWGJ0QUs5RzlhNzd3N2RpNDB1RU1TWFFGVGsvNTlhOHo1L3ZOa0RJT2VhN3J3c3hHbS9SeUt6cTdHbFBjLzlrPSIgaWQ9InN2Z184IiBoZWlnaHQ9IjYwIiB3aWR0aD0iODAiIHk9IjU0IiB4PSI0NiIvPgogIDxpbWFnZSB4bGluazpocmVmPSJkYXRhOmltYWdlL2pwZWc7YmFzZTY0LC85ai80QUFRU2taSlJnQUJBUUFBQVFBQkFBRC8vZ0E3UTFKRlFWUlBVam9nWjJRdGFuQmxaeUIyTVM0d0lDaDFjMmx1WnlCSlNrY2dTbEJGUnlCMk5qSXBMQ0J4ZFdGc2FYUjVJRDBnTnpVSy85c0FRd0FJQmdZSEJnVUlCd2NIQ1FrSUNnd1VEUXdMQ3d3WkVoTVBGQjBhSHg0ZEdod2NJQ1F1SnlBaUxDTWNIQ2czS1N3d01UUTBOQjhuT1QwNE1qd3VNelF5LzlzQVF3RUpDUWtNQ3d3WURRMFlNaUVjSVRJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXkvOEFBRVFnQVBBQlFBd0VpQUFJUkFRTVJBZi9FQUI4QUFBRUZBUUVCQVFFQkFBQUFBQUFBQUFBQkFnTUVCUVlIQ0FrS0MvL0VBTFVRQUFJQkF3TUNCQU1GQlFRRUFBQUJmUUVDQXdBRUVRVVNJVEZCQmhOUllRY2ljUlF5Z1pHaENDTkNzY0VWVXRId0pETmljb0lKQ2hZWEdCa2FKU1luS0NrcU5EVTJOemc1T2tORVJVWkhTRWxLVTFSVlZsZFlXVnBqWkdWbVoyaHBhbk4wZFhaM2VIbDZnNFNGaG9lSWlZcVNrNVNWbHBlWW1acWlvNlNscHFlb3FhcXlzN1MxdHJlNHVickN3OFRGeHNmSXljclMwOVRWMXRmWTJkcmg0dVBrNWVibjZPbnE4Zkx6OVBYMjkvajUrdi9FQUI4QkFBTUJBUUVCQVFFQkFRRUFBQUFBQUFBQkFnTUVCUVlIQ0FrS0MvL0VBTFVSQUFJQkFnUUVBd1FIQlFRRUFBRUNkd0FCQWdNUkJBVWhNUVlTUVZFSFlYRVRJaktCQ0JSQ2thR3h3UWtqTTFMd0ZXSnkwUW9XSkRUaEpmRVhHQmthSmljb0tTbzFOamM0T1RwRFJFVkdSMGhKU2xOVVZWWlhXRmxhWTJSbFptZG9hV3B6ZEhWMmQzaDVlb0tEaElXR2g0aUppcEtUbEpXV2w1aVptcUtqcEtXbXA2aXBxckt6dExXMnQ3aTV1c0xEeE1YR3g4akp5dExUMU5YVzE5aloydUxqNU9YbTUranA2dkx6OVBYMjkvajUrdi9hQUF3REFRQUNFUU1SQUQ4QThrZGFnZGF0dUtnY1Y5Wk9CNU1KRlJscUZoVnRseWFpYU0rMzUxeXpqWTZZTzVVWVZHUlZsb3o2VkV5SDBOYzhrYnE1RlJTbFQ2R2pCck1zU2twMlBjVWh4OWFWd3NkRTVxYlRMTCswTHdSRWtJQmxpUFNxa2hyb2ZCSWprMWd4eU56SXBVRDFQWCtocnN6cXZQRDRLZFNudXY4QU01OHZveHFWNHhsc0t1bFd0eGNyWjJrSkUwcENLeGJPU2ZidCtZcXpOOE5mRVB6ckRhUnV5RTUvZkwyT09PMzg2OUswN3dMWVR6eDZnMXhQSGR4T3NrYXhzT01kaHgwUEdmNlZxNnkwME1sc2xta2NnRzVHWDd4VWpzY2NEbjNyNUNobWNyUmNKTjMzdnJxZTdVdzhXMm1rdlRUUThTaDhBNm95aDcrV0t3ajJsbWFZbjVWSGNnRHBXWGRlRTlSZzFTU3hVUlNzaTdqSWpaVEgxcjN5U0tDOXRDOTFjVzdSUUR6ZktRZFFCeVR6MlA4QUt1WDFqN0RlVzBPbTZoSGNhZTVrMlFUMm93QVJ5RHgySS9sWHAwOGZPYjk1SEhQRHFLOTA4WnU5RDFHemg4NmUwbVdIcjVnWGNwSHJrY1ZtbmpwK3RlbnY0VzFiU05kOHU5MTc5eTdCbUc0Z3l4SEEzQlQ4cDVQVFBhdWUxcndyWmFQcWp3WGQ2eEUrUHMza3g0NUo2a04wVWNmMDlhNm8xNHQydmYwTWVScm9jZjE3MGhGYUdwNlBlYVRNMGR6R05vWXB2UTVVa2RzK3RaOWJKcHE2SWZtZEJJbEZuZFMyRjNIY1JNVlpHQkJIYkhlcmtrTlZuaDlxOSt2UWpWZzRUVjB6ektOZHhha3QwZWsySGpsNzFVUDJzUVRCY01OMkFmcC9oV1Q0ZzhhM0VWbzFwYTNLdThqNUx4akJBOWoycmhqR1ZPUVNENmltRkNUazhuM3I1YWh3dlJvMStmbWJpdGVVOXFlY1NuVDVlV3o3a28xQzZXUjNqdUpZeTZsV3c1NUI2ZysxYStnK0w3N1FwaHVWYnUzL0FPZVVySGcrcW5xUDVWZ2xhWXdyMnF1SHB1UEsxb2VlcTg3M3ZxZW4yZnhHc3Rjdm9kTnY5TGh0N2FRbU15eXZ2SkJ4Z0hqQTVHVDI0SHBtalUvRHNlcWViYXpUTkxFMjZSRHRJMlNBQTRWem5DbmtZT1FEWGxUWnE1YmE5cTFoQUliWFVMaUtFRW55dzUyNVB0MDdWNU5UQXFEdlJkanNqaU9iNDlUcjE4R1RTK0g5U21zYlM4aFF3cVZzcmdoM2FRSDd5a1l4am50MEo5Y1Y1NWMyczlwTTBOeEM4TXE4bEhYQkZkSC9BTUovNG9FRFJEVkcyc0NDZktUY1JqSFhHYXF5ZUpqZURHcTZiYTNqQ1BZSElNYmc1em5LbjhNREZaMG80aURmUFpyeTMvRXVicE5MbHVqYWVMMnFCNGZhdEoxRlFPb3I3aWNFZkp3cU16V2hxRm9xMFdVVkN5aXVhVURwalVabnRIVURKV2c2aW9IVVZ5emdieG1aN3BVTExWNTFGVjNBcmtuQTZvU0tiTGlvelZoeFVMVnlTUjBSWi8vWiIgaWQ9InN2Z185IiBoZWlnaHQ9IjYwIiB3aWR0aD0iODAiIHk9IjE1OCIgeD0iMzYiLz4KIDwvZz4KPC9zdmc+">

<svg width="7in" height="4in" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect style="pointer-events:none" fill="#FFF" stroke="#000" y="0" x="0" height="100%" width="100%"/>
<g><title>Layer 1</title><rect fill="#FF0000" stroke="#000000" stroke-width="5" x="1223" y="1021" width="434" height="230" id="svg_2"/><rect fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="1197" y="1017" width="415" height="231" id="svg_4"/><rect id="svg_6" height="12" width="24" y="1293" x="1466" stroke-width="5" stroke="#000000" fill="#FF0000"/><rect fill="#FF0000" stroke="#000000" stroke-width="5" x="189" y="44" width="153" height="107" id="svg_1"/><rect fill="#00ffff" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="173" y="157" width="194" height="62" id="svg_3"/><rect id="svg_5" height="73" width="308" y="220" x="118" stroke-width="5" stroke="#000000" fill="#FF0000"/><image x="219" y="37" width="400" height="267" id="svg_7" xlink:href="http://t2.ftcdn.net/jpg/00/55/99/75/400_F_55997536_jTGTgI1rYC8golbIAuz3bGMst5AhwT9V.jpg"/><image xlink:href="data:image/jpeg;base64,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" id="svg_8" height="60" width="80" y="54" x="46"/><image xlink:href="data:image/jpeg;base64,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" id="svg_9" height="60" width="80" y="158" x="36"/></g>

please check link

2 个答案:

答案 0 :(得分:3)

当您将SVG用作图像格式时,即在HTML <img>标记中(正如您所做)或作为背景图像使用SVG文件must be complete in the one file in order to protect user's privacy

您的SVG图像是指外部jpg文件,这是不允许的。你可以做这个工作。

  1. 获取jpg图像数据并在base64中编码 并将其嵌入SVG文件中。
  2. 使用编码的内部图像数据作为base64对整个新SVG文件进行编码,然后将其作为<img>
  3. 插入

    如果您使用javascript,则可以遵循此解决方案:JS: how to load a bitmap image and get its base64 code?

答案 1 :(得分:0)

如果我们使用对象标记,那么代替使用img标记,那么图像将在所有浏览器中正确显示。

<object type="image/svg+xml" data="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iN2luIiBoZWlnaHQ9IjRpbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHJlY3Qgc3R5bGU9InBvaW50ZXItZXZlbnRzOm5vbmUiIGZpbGw9IiNGRkYiIHN0cm9rZT0iIzAwMCIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSI+PC9yZWN0PgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiNGRjAwMDAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1IiB4PSIxMjIzIiB5PSIxMDIxIiB3aWR0aD0iNDM0IiBoZWlnaHQ9IjIzMCIgaWQ9InN2Z18yIi8+CiAgPHJlY3QgZmlsbD0iI0ZGMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1kYXNoYXJyYXk9Im51bGwiIHN0cm9rZS1saW5lam9pbj0ibnVsbCIgc3Ryb2tlLWxpbmVjYXA9Im51bGwiIHg9IjExOTciIHk9IjEwMTciIHdpZHRoPSI0MTUiIGhlaWdodD0iMjMxIiBpZD0ic3ZnXzQiLz4KICA8cmVjdCBpZD0ic3ZnXzYiIGhlaWdodD0iMTIiIHdpZHRoPSIyNCIgeT0iMTI5MyIgeD0iMTQ2NiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiNGRjAwMDAiLz4KICA8cmVjdCBmaWxsPSIjRkYwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNSIgeD0iMTg5IiB5PSI0NCIgd2lkdGg9IjE1MyIgaGVpZ2h0PSIxMDciIGlkPSJzdmdfMSIvPgogIDxyZWN0IGZpbGw9IiMwMGZmZmYiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtZGFzaGFycmF5PSJudWxsIiBzdHJva2UtbGluZWpvaW49Im51bGwiIHN0cm9rZS1saW5lY2FwPSJudWxsIiB4PSIxNzMiIHk9IjE1NyIgd2lkdGg9IjE5NCIgaGVpZ2h0PSI2MiIgaWQ9InN2Z18zIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjczIiB3aWR0aD0iMzA4IiB5PSIyMjAiIHg9IjExOCIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiNGRjAwMDAiLz4KICA8aW1hZ2UgeD0iMSIgeT0iMSIgd2lkdGg9IjU3MyIgaGVpZ2h0PSIyOTkiIGlkPSJzdmdfNyIgeGxpbms6aHJlZj0iaHR0cDovL3QyLmZ0Y2RuLm5ldC9qcGcvMDAvNTUvOTkvNzUvNDAwX0ZfNTU5OTc1MzZfalRHVGdJMXJZQzhnb2xiSUF1ejNiR01zdDVBaHdUOVYuanBnIi8+CiA8L2c+Cjwvc3ZnPg=="></object>

plz check link