2

Instead of copying/pasting the full svg into my index.html file (so that I can access any path for animation), I was wondering if there is a way to load an svg externally AND being able to access any path element? So far, when I load an external SVG file, it gets displayed, but I can't access any specific path. Is there a method/function to accomplish this?

For example, I can change the hexagons' colors with CSS IF the SVG is in the index.html file only. It's not a problem if the SVG is small, but for more intricate SVGs, I'd like to keep them in separate files for clarity.

#hexagon1 {
  opacity: 1;
  fill: #ffb619;
  stroke-width: 4.50001;
  stroke-linecap: round;
  stroke-miterlimit: 7
}

#hexagon2 {
  opacity: 1;
  fill: #008000;
  stroke-width: 4.50001;
  stroke-linecap: round;
  stroke-miterlimit: 7
}
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="101.83981mm" height="74.999893mm"
  viewBox="0 0 101.83981 74.999893" version="1.1" id="svg8">
  <defs
     id="defs2" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     transform="translate(-28.970265,-13.579265)">
    <path
       id="hexagon1"
       d="M 43.906288,64.275181 28.970265,39.449215 43.002172,14.101257 71.9701,13.579265 86.906123,38.405231 72.874217,63.753189 Z" />
    <path
       id="hexagon2"
       d="M 87.810242,88.579156 72.874219,63.753189 86.906125,38.405231 115.87405,37.883239 130.81008,62.709205 116.77817,88.057164 Z" />
  </g>
</svg>
Johnathan
  • 105
  • 1
  • 8

2 Answers2

3

Try the <object> tag with data=image/svg+xml.

<object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/8/8c/SVG_logo_h.svg"></object>

For accessing the content document of the <object> refer to this answer. In short:

const COLORS = ['red', 'orange', 'gold', 'forestgreen', 'blue', 'purple'];
const svg = document.querySelector('.svg-logo');

svg.addEventListener('load', () => {
  const svgDoc = svg.contentDocument;
  const hex1 = svgDoc.getElementById("hexagon1");
  const hex2 = svgDoc.getElementById("hexagon2");

  let i = 0;
  window.setInterval(() => {
    const j = i + 2 % COLORS.length;

    hex1.fill = COLORS[i];
    hex2.fill = COLORS[j];

    i = i + 1 % COLORS.length;
  }, 500)
});
Rúnar Berg
  • 4,229
  • 1
  • 22
  • 38
0

I used the img tag and it suits my needs:

<img src="yourfile.svg" alt="some text">

in order to access the path inside the SVG file you can simply use CSS. Here, JavaScript seams overkill for me. Use the following link. It's a pretty and thorough article toward animation inside the SVG files but shows you how to access the SVG properties by CSS.

https://css-tricks.com/guide-svg-animations-smil/

Instead of the src="" in img tag you can use the address of your svg file 

        .container img {
            max-width: 100%;
            width: 50%;
            object-fit:fill;
            margin: auto;
        }
        .container {
            overflow: visible;
        }

        .svgContainer {
            height: 100%;
            position: relative;
            transition: 2s;
        }

        .svgContainer img{
            margin: auto;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>



</head>

<body>
<div class="container">
    <div class="svgContainer ">
        <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMjAiIGlkPSJzdmc0MjU0IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiB3aWR0aD0iMTIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcyBpZD0iZGVmczQyNTYiLz48cGF0aCBkPSJNIDExMi42MTMyNyw1OS45OTk5MzMgQSA1Mi42MTMyODUsNTIuNjEzMjE1IDAgMCAxIDU5Ljk5OTk4OCwxMTIuNjEzMTUgNTIuNjEzMjg1LDUyLjYxMzIxNSAwIDAgMSA3LjM4NjcwMjMsNTkuOTk5OTMzIDUyLjYxMzI4NSw1Mi42MTMyMTUgMCAwIDEgNTkuOTk5OTg4LDcuMzg2NzE2NCA1Mi42MTMyODUsNTIuNjEzMjE1IDAgMCAxIDExMi42MTMyNyw1OS45OTk5MzMgWiIgaWQ9ImNpcmNsZTk2MDIiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojODBkZWVhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDo2LjkwMDAwMDE7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIvPjxwYXRoIGQ9Im0gMjUuMDI0Mzc4LDQ4LjI3OTg0NSAwLjIxMjgzMSwwIDAsMi44OTcwMzYgLTAuMjEyODMxLDAgeiIgaWQ9InJlY3Q5NjM2IiBzdHlsZT0iY29sb3I6IzAwMDAwMDtjbGlwLXJ1bGU6bm9uemVybztkaXNwbGF5OmlubGluZTtvdmVyZmxvdzp2aXNpYmxlO3Zpc2liaWxpdHk6dmlzaWJsZTtvcGFjaXR5OjE7aXNvbGF0aW9uOmF1dG87bWl4LWJsZW5kLW1vZGU6bm9ybWFsO2NvbG9yLWludGVycG9sYXRpb246c1JHQjtjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6bGluZWFyUkdCO3NvbGlkLWNvbG9yOiMwMDAwMDA7c29saWQtb3BhY2l0eToxO2ZpbGw6IzAzYTlmNDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MzUuMjAwMDAwNzY7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO2NvbG9yLXJlbmRlcmluZzphdXRvO2ltYWdlLXJlbmRlcmluZzphdXRvO3NoYXBlLXJlbmRlcmluZzphdXRvO3RleHQtcmVuZGVyaW5nOmF1dG87ZW5hYmxlLWJhY2tncm91bmQ6YWNjdW11bGF0ZSIvPjxwYXRoIGQ9Im0gMjUuNzEyNDgzLDQ4LjY1MzgwNSBjIC0wLjA5ODg5LDAuMTcxMjc2IC0xLjA2NDQ4NSwwLjE3MTI3NiAtMS4xNjMzNzEsMCAtMC4wOTg4OSwtMC4xNzEyNzcgMC4zODM5MTIsLTEuMDA3NTA4IDAuNTgxNjg1LC0xLjAwNzUwOCAwLjE5Nzc3NCwwIDAuNjgwNTczLDAuODM2MjMxIDAuNTgxNjg2LDEuMDA3NTA4IHoiIGlkPSJwYXRoOTYzOCIgc3R5bGU9ImNvbG9yOiMwMDAwMDA7Y2xpcC1ydWxlOm5vbnplcm87ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTt2aXNpYmlsaXR5OnZpc2libGU7b3BhY2l0eToxO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtjb2xvci1pbnRlcnBvbGF0aW9uOnNSR0I7Y29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOmxpbmVhclJHQjtzb2xpZC1jb2xvcjojMDAwMDAwO3NvbGlkLW9wYWNpdHk6MTtmaWxsOiMwM2E5ZjQ7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjM1LjIwMDAwMDc2O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MTtjb2xvci1yZW5kZXJpbmc6YXV0bztpbWFnZS1yZW5kZXJpbmc6YXV0bztzaGFwZS1yZW5kZXJpbmc6YXV0bzt0ZXh0LXJlbmRlcmluZzphdXRvO2VuYWJsZS1iYWNrZ3JvdW5kOmFjY3VtdWxhdGUiLz48cGF0aCBkPSJtIDI2LjEzMDE5Niw0OS44ODgwOTcgYyAtMC4xNjk4OTgsMC4yOTQyNzEgLTEuODI4ODk5LDAuMjk0MjcxIC0xLjk5ODc5NywwIC0wLjE2OTg5OCwtMC4yOTQyNzEgMC42NTk2MDMsLTEuNzMxMDA2IDAuOTk5Mzk4LC0xLjczMTAwNiAwLjMzOTc5NiwwIDEuMTY5Mjk2LDEuNDM2NzM1IDAuOTk5Mzk5LDEuNzMxMDA2IHoiIGlkPSJwYXRoOTY0MCIgc3R5bGU9ImNvbG9yOiMwMDAwMDA7Y2xpcC1ydWxlOm5vbnplcm87ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTt2aXNpYmlsaXR5OnZpc2libGU7b3BhY2l0eToxO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtjb2xvci1pbnRlcnBvbGF0aW9uOnNSR0I7Y29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOmxpbmVhclJHQjtzb2xpZC1jb2xvcjojMDAwMDAwO3NvbGlkLW9wYWNpdHk6MTtmaWxsOiMwM2E5ZjQ7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjM1LjIwMDAwMDc2O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MTtjb2xvci1yZW5kZXJpbmc6YXV0bztpbWFnZS1yZW5kZXJpbmc6YXV0bztzaGFwZS1yZW5kZXJpbmc6YXV0bzt0ZXh0LXJlbmRlcmluZzphdXRvO2VuYWJsZS1iYWNrZ3JvdW5kOmFjY3VtdWxhdGUiLz48cGF0aCBkPSJtIDExLjA1MDQ0Niw1My4wNjQ3MTkgMC4xMzcwMDQsMCAwLDEuODY0ODg4IC0wLjEzNzAwNCwwIHoiIGlkPSJyZWN0OTY0NCIgc3R5bGU9ImNvbG9yOiMwMDAwMDA7Y2xpcC1ydWxlOm5vbnplcm87ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTt2aXNpYmlsaXR5OnZpc2libGU7b3BhY2l0eToxO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtjb2xvci1pbnRlcnBvbGF0aW9uOnNSR0I7Y29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOmxpbmVhclJHQjtzb2xpZC1jb2xvcjojMDAwMDAwO3NvbGlkLW9wYWNpdHk6MTtmaWxsOiMwM2E5ZjQ7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjM1LjIwMDAwMDc2O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MTtjb2xvci1yZW5kZXJpbmc6YXV0bztpbWFnZS1yZW5kZXJpbmc6YXV0bztzaGFwZS1yZW5kZXJpbmc6YXV0bzt0ZXh0LXJlbmRlcmluZzphdXRvO2VuYWJsZS1iYWNrZ3JvdW5kOmFjY3VtdWxhdGUiLz48cGF0aCBkPSJtIDExLjQ5MzM5NSw1My4zMDU0NDYgYyAtMC4wNjM2NSwwLjExMDI1NCAtMC42ODUyMzMsMC4xMTAyNTQgLTAuNzQ4ODg4LDAgLTAuMDYzNjYsLTAuMTEwMjU1IDAuMjQ3MTMzLC0wLjY0ODU1NiAwLjM3NDQ0NCwtMC42NDg1NTYgMC4xMjczMTEsMCAwLjQzODEsMC41MzgzMDEgMC4zNzQ0NDQsMC42NDg1NTYgeiIgaWQ9InBhdGg5NjQ2IiBzdHlsZT0iY29sb3I6IzAwMDAwMDtjbGlwLXJ1bGU6bm9uemVybztkaXNwbGF5OmlubGluZTtvdmVyZmxvdzp2aXNpYmxlO3Zpc2liaWxpdHk6dmlzaWJsZTtvcGFjaXR5OjE7aXNvbGF0aW9uOmF1dG87bWl4LWJsZW5kLW1vZGU6bm9ybWFsO2NvbG9yLWludGVycG9sYXRpb246c1JHQjtjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6bGluZWFyUkdCO3NvbGlkLWNvbG9yOiMwMDAwMDA7c29saWQtb3BhY2l0eToxO2ZpbGw6IzAzYTlmNDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MzUuMjAwMDAwNzY7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO2NvbG9yLXJlbmRlcmluZzphdXRvO2ltYWdlLXJlbmRlcmluZzphdXRvO3NoYXBlLXJlbmRlcmluZzphdXRvO3RleHQtcmVuZGVyaW5nOmF1dG87ZW5hYmxlLWJhY2tncm91bmQ6YWNjdW11bGF0ZSIvPjxwYXRoIGQ9Im0gMTEuNzYyMjg2LDU0LjA5OTk4NyBjIC0wLjEwOTM2NywwLjE4OTQyOSAtMS4xNzczMDQsMC4xODk0MjkgLTEuMjg2NjcsMCAtMC4xMDkzNjcsLTAuMTg5NDI5IDAuNDI0NjAxLC0xLjExNDI4OCAwLjY0MzMzNSwtMS4xMTQyODggMC4yMTg3MzQsMCAwLjc1MjcwMiwwLjkyNDg1OSAwLjY0MzMzNSwxLjExNDI4OCB6IiBpZD0icGF0aDk2NDgiIHN0eWxlPSJjb2xvcjojMDAwMDAwO2NsaXAtcnVsZTpub256ZXJvO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7dmlzaWJpbGl0eTp2aXNpYmxlO29wYWNpdHk6MTtpc29sYXRpb246YXV0bzttaXgtYmxlbmQtbW9kZTpub3JtYWw7Y29sb3ItaW50ZXJwb2xhdGlvbjpzUkdCO2NvbG9yLWludGVycG9sYXRpb24tZmlsdGVyczpsaW5lYXJSR0I7c29saWQtY29sb3I6IzAwMDAwMDtzb2xpZC1vcGFjaXR5OjE7ZmlsbDojMDNhOWY0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozNS4yMDAwMDA3NjtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjE7Y29sb3ItcmVuZGVyaW5nOmF1dG87aW1hZ2UtcmVuZGVyaW5nOmF1dG87c2hhcGUtcmVuZGVyaW5nOmF1dG87dGV4dC1yZW5kZXJpbmc6YXV0bztlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIi8+PHBhdGggZD0iTSAxOC41MDUxMjgsNDcuMjA2NjggNy40NzQ5ODQ2LDU4LjIzNjgzIGMgLTAuMDM5MjY0LDAuNTg3MjE4IC0wLjA2ODcwNSwxLjE3NTA1MyAtMC4wODgyNDgsMS43NjMyNTggMi41M2UtNSwyOS4wNTc0NTkgMjMuNTU1NzY0OCw1Mi42MTMxODIgNTIuNjEzMjY0OCw1Mi42MTMxOTIgMjAuMDIwMTY1LC0wLjAyNzMgMzguMjkwMDA5LC0xMS40MTQzMiA0Ny4xMzIxMDksLTI5LjM3NjA2NSBMIDc4LjAzMDk4Niw1MC43NTQwMjMgNTkuMTQ3ODQ1LDcwLjY3MTgzNiBaIiBpZD0icGF0aDk2MDQiIHN0eWxlPSJmaWxsOiMwM2E5ZjQ7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIi8+PHBhdGggZD0ibSA3Mi41NDIwMzcsNDkuNzUxNTcxIGEgNi43OTIxODIyLDYuNzkyMTczIDAgMCAxIC02Ljc5MjE4Miw2Ljc5MjE3MyA2Ljc5MjE4MjIsNi43OTIxNzMgMCAwIDEgLTYuNzkyMTgyLC02Ljc5MjE3MyA2Ljc5MjE4MjIsNi43OTIxNzMgMCAwIDEgNi43OTIxODIsLTYuNzkyMTczIDYuNzkyMTgyMiw2Ljc5MjE3MyAwIDAgMSA2Ljc5MjE4Miw2Ljc5MjE3MyB6IiBpZD0iY2lyY2xlOTYwNiIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmZmY1OWQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjYuOTAwMDAwMTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxIi8+PHBhdGggZD0ibSAxMDEuNzY2NTUsNjAuNTAyMjQyIDAuMzA0OTYsMCAwLDQuMTUxMDQ1IC0wLjMwNDk2LDAgeiIgaWQ9InJlY3Q5NjE1IiBzdHlsZT0iY29sb3I6IzAwMDAwMDtjbGlwLXJ1bGU6bm9uemVybztkaXNwbGF5OmlubGluZTtvdmVyZmxvdzp2aXNpYmxlO3Zpc2liaWxpdHk6dmlzaWJsZTtvcGFjaXR5OjE7aXNvbGF0aW9uOmF1dG87bWl4LWJsZW5kLW1vZGU6bm9ybWFsO2NvbG9yLWludGVycG9sYXRpb246c1JHQjtjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6bGluZWFyUkdCO3NvbGlkLWNvbG9yOiMwMDAwMDA7c29saWQtb3BhY2l0eToxO2ZpbGw6IzAwODk3YjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MzUuMjAwMDAwNzY7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO2NvbG9yLXJlbmRlcmluZzphdXRvO2ltYWdlLXJlbmRlcmluZzphdXRvO3NoYXBlLXJlbmRlcmluZzphdXRvO3RleHQtcmVuZGVyaW5nOmF1dG87ZW5hYmxlLWJhY2tncm91bmQ6YWNjdW11bGF0ZSIvPjxwYXRoIGQ9Im0gMTAyLjc1MjUxLDYxLjAzODA3NiBjIC0wLjE0MTY5LDAuMjQ1NDE1IC0xLjUyNTI1LDAuMjQ1NDE1IC0xLjY2Njk0LDAgLTAuMTQxNywtMC4yNDU0MTUgMC41NTAwOSwtMS40NDM2MTcgMC44MzM0NywtMS40NDM2MTcgMC4yODMzOCwwIDAuOTc1MTYsMS4xOTgyMDIgMC44MzM0NywxLjQ0MzYxNyB6IiBpZD0icGF0aDk2MTciIHN0eWxlPSJjb2xvcjojMDAwMDAwO2NsaXAtcnVsZTpub256ZXJvO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7dmlzaWJpbGl0eTp2aXNpYmxlO29wYWNpdHk6MTtpc29sYXRpb246YXV0bzttaXgtYmxlbmQtbW9kZTpub3JtYWw7Y29sb3ItaW50ZXJwb2xhdGlvbjpzUkdCO2NvbG9yLWludGVycG9sYXRpb24tZmlsdGVyczpsaW5lYXJSR0I7c29saWQtY29sb3I6IzAwMDAwMDtzb2xpZC1vcGFjaXR5OjE7ZmlsbDojMDA4OTdiO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozNS4yMDAwMDA3NjtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjE7Y29sb3ItcmVuZGVyaW5nOmF1dG87aW1hZ2UtcmVuZGVyaW5nOmF1dG87c2hhcGUtcmVuZGVyaW5nOmF1dG87dGV4dC1yZW5kZXJpbmc6YXV0bztlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIi8+PHBhdGggZD0ibSAxMDMuMzUxMDQsNjIuODA2NjQyIGMgLTAuMjQzNDQsMC40MjE2NDkgLTIuNjIwNTYsMC40MjE2NDkgLTIuODY0LDAgLTAuMjQzNDQsLTAuNDIxNjQ5IDAuOTQ1MTIsLTIuNDgwMjg4IDEuNDMyLC0yLjQ4MDI4OCAwLjQ4Njg4LDAgMS42NzU0NCwyLjA1ODYzOSAxLjQzMiwyLjQ4MDI4OCB6IiBpZD0icGF0aDk2MTkiIHN0eWxlPSJjb2xvcjojMDAwMDAwO2NsaXAtcnVsZTpub256ZXJvO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7dmlzaWJpbGl0eTp2aXNpYmxlO29wYWNpdHk6MTtpc29sYXRpb246YXV0bzttaXgtYmxlbmQtbW9kZTpub3JtYWw7Y29sb3ItaW50ZXJwb2xhdGlvbjpzUkdCO2NvbG9yLWludGVycG9sYXRpb24tZmlsdGVyczpsaW5lYXJSR0I7c29saWQtY29sb3I6IzAwMDAwMDtzb2xpZC1vcGFjaXR5OjE7ZmlsbDojMDA4OTdiO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozNS4yMDAwMDA3NjtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjE7Y29sb3ItcmVuZGVyaW5nOmF1dG87aW1hZ2UtcmVuZGVyaW5nOmF1dG87c2hhcGUtcmVuZGVyaW5nOmF1dG87dGV4dC1yZW5kZXJpbmc6YXV0bztlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIi8+PHBhdGggZD0ibSAxMDMuODg4MTcsNjQuNzExNzUyIDAuMTIyNDksMCAwLDEuNjY3Mzc4IC0wLjEyMjQ5LDAgeiIgaWQ9InJlY3Q5NjI4IiBzdHlsZT0iY29sb3I6IzAwMDAwMDtjbGlwLXJ1bGU6bm9uemVybztkaXNwbGF5OmlubGluZTtvdmVyZmxvdzp2aXNpYmxlO3Zpc2liaWxpdHk6dmlzaWJsZTtvcGFjaXR5OjE7aXNvbGF0aW9uOmF1dG87bWl4LWJsZW5kLW1vZGU6bm9ybWFsO2NvbG9yLWludGVycG9sYXRpb246c1JHQjtjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6bGluZWFyUkdCO3NvbGlkLWNvbG9yOiMwMDAwMDA7c29saWQtb3BhY2l0eToxO2ZpbGw6IzAwODk3YjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MzUuMjAwMDAwNzY7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO2NvbG9yLXJlbmRlcmluZzphdXRvO2ltYWdlLXJlbmRlcmluZzphdXRvO3NoYXBlLXJlbmRlcmluZzphdXRvO3RleHQtcmVuZGVyaW5nOmF1dG87ZW5hYmxlLWJhY2tncm91bmQ6YWNjdW11bGF0ZSIvPjxwYXRoIGQ9Im0gMTA0LjI4NDIsNjQuOTI2OTg0IGMgLTAuMDU2OSwwLjA5ODU4IC0wLjYxMjY2LDAuMDk4NTggLTAuNjY5NTgsMCAtMC4wNTY5LC0wLjA5ODU4IDAuMjIwOTYsLTAuNTc5ODY4IDAuMzM0NzksLTAuNTc5ODY4IDAuMTEzODMsMCAwLjM5MTcsMC40ODEyOSAwLjMzNDc5LDAuNTc5ODY4IHoiIGlkPSJwYXRoOTYzMCIgc3R5bGU9ImNvbG9yOiMwMDAwMDA7Y2xpcC1ydWxlOm5vbnplcm87ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTt2aXNpYmlsaXR5OnZpc2libGU7b3BhY2l0eToxO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtjb2xvci1pbnRlcnBvbGF0aW9uOnNSR0I7Y29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOmxpbmVhclJHQjtzb2xpZC1jb2xvcjojMDAwMDAwO3NvbGlkLW9wYWNpdHk6MTtmaWxsOiMwMDg5N2I7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjM1LjIwMDAwMDc2O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MTtjb2xvci1yZW5kZXJpbmc6YXV0bztpbWFnZS1yZW5kZXJpbmc6YXV0bztzaGFwZS1yZW5kZXJpbmc6YXV0bzt0ZXh0LXJlbmRlcmluZzphdXRvO2VuYWJsZS1iYWNrZ3JvdW5kOmFjY3VtdWxhdGUiLz48cGF0aCBkPSJtIDEwNC41MjQ2MSw2NS42MzczNzYgYyAtMC4wOTc4LDAuMTY5MzY2IC0xLjA1MjYxLDAuMTY5MzY2IC0xLjE1MDQsMCAtMC4wOTc4LC0wLjE2OTM2NyAwLjM3OTYzLC0wLjk5NjI3NCAwLjU3NTIsLTAuOTk2Mjc0IDAuMTk1NTcsMCAwLjY3Mjk5LDAuODI2OTA3IDAuNTc1MiwwLjk5NjI3NCB6IiBpZD0icGF0aDk2MzIiIHN0eWxlPSJjb2xvcjojMDAwMDAwO2NsaXAtcnVsZTpub256ZXJvO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7dmlzaWJpbGl0eTp2aXNpYmxlO29wYWNpdHk6MTtpc29sYXRpb246YXV0bzttaXgtYmxlbmQtbW9kZTpub3JtYWw7Y29sb3ItaW50ZXJwb2xhdGlvbjpzUkdCO2NvbG9yLWludGVycG9sYXRpb24tZmlsdGVyczpsaW5lYXJSR0I7c29saWQtY29sb3I6IzAwMDAwMDtzb2xpZC1vcGFjaXR5OjE7ZmlsbDojMDA4OTdiO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozNS4yMDAwMDA3NjtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjE7Y29sb3ItcmVuZGVyaW5nOmF1dG87aW1hZ2UtcmVuZGVyaW5nOmF1dG87c2hhcGUtcmVuZGVyaW5nOmF1dG87dGV4dC1yZW5kZXJpbmc6YXV0bztlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIi8+PHBhdGggZD0iTSA1MC4xMjEzNzYsMzQuMTIzMjc5IDkuNTIwMjgyOSw3NC43MjQzMDUgQSA1Mi42MTMyODQsNTIuNjEzMjE1IDAgMCAwIDYwLjAwMDAwMSwxMTIuNjEzMjggNTIuNjEzMjg0LDUyLjYxMzIxNSAwIDAgMCAxMTAuODU5ODksNzMuMjEyMzc1IEwgODQuMTUxMjQ2LDQ2LjUwMzc1NiA3Ni4yMjcyMzQsNjAuMjI4NjEzIDUwLjEyMTM3NiwzNC4xMjMyNzkgWiIgaWQ9InBhdGg5NjA4IiBzdHlsZT0iZmlsbDojNGZjM2Y3O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxcHg7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW9wYWNpdHk6MSIvPjxwYXRoIGQ9Im0gNTAuMTIxNDkyLDM0LjEyMzg3MiAtMTMuMzY2NDQ0LDEzLjM2NTEzIGMgNC42MzQ4NDYsMi42NzE3MTcgMTEuMTU5MTM2LDYuNzA1ODA2IDExLjE1OTEzNiw2LjcwNTgwNiBsIDQuMzM0NTc4LC03LjUwNzQwNCAzLjc1NDk5NiwzLjc1MzcwMiAzLjgxOTUzMywtNi42MTU0NDEgLTkuNzAxNzk5LC05LjcwMTc5MyB6IiBpZD0icGF0aDk2MTAiIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjIuNjAzOTUzNnB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiLz48L3N2Zz4=">
    </div>
</div>

</body>
</html>
EhsanSafari
  • 66
  • 4