Load an SVG from an external page

cafe-18.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<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"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="18"
   height="18"
   id="svg4619"
   version="1.1"
   inkscape:version="0.48.2 r9819"
   sodipodi:docname="cafe-18.svg">
  <defs
     id="defs4621" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="16"
     inkscape:cx="5.9619453"
     inkscape:cy="11.948034"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="true"
     showguides="true"
     inkscape:guide-bbox="true"
     inkscape:window-width="1231"
     inkscape:window-height="818"
     inkscape:window-x="-6"
     inkscape:window-y="146"
     inkscape:window-maximized="0"
     inkscape:snap-bbox="true"
     inkscape:snap-nodes="false">
    <inkscape:grid
       type="xygrid"
       id="grid4627"
       empspacing="5"
       visible="true"
       enabled="true"
       snapvisiblegridlinesonly="true"
       spacingx="1px"
       spacingy="1px" />
    <sodipodi:guide
       orientation="0,1"
       position="7,18"
       id="guide4659" />
    <sodipodi:guide
       orientation="1,0"
       position="18,9"
       id="guide4661" />
    <sodipodi:guide
       orientation="0,1"
       position="16,17"
       id="guide4663" />
    <sodipodi:guide
       orientation="1,0"
       position="17,14"
       id="guide4665" />
    <sodipodi:guide
       orientation="1,0"
       position="0,16"
       id="guide4667" />
    <sodipodi:guide
       orientation="0,1"
       position="8,0"
       id="guide4669" />
    <sodipodi:guide
       orientation="1,0"
       position="2,10"
       id="guide4671" />
    <sodipodi:guide
       orientation="0,1"
       position="12,2"
       id="guide4673" />
  </sodipodi:namedview>
  <metadata
     id="metadata4624">
    <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
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-1034.3622)">
    <g
       style="display:inline"
       id="restaurant-18"
       inkscape:label="restaurant-18"
       transform="translate(-341.99999,-15.999983)"
       inkscape:export-xdpi="89.996864"
       inkscape:export-ydpi="89.996864">
      <g
         id="g21606">
        <path
           sodipodi:nodetypes="cccsscsscccccccccccssscscsc"
           style="opacity:0.3;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
           d="m 348,1052.3622 -1,0 c 0,1.2963 0,3.2037 0,4.5 0,0.7777 1,0.7222 1,1.5 l 0,7 c 0,0.3889 0.5,1 1,1 0.5,0 1,-0.5 1,-1 l 0,-7 c 0,-0.7778 1,-0.7223 1,-1.5 0,-1.2963 0,-3.2037 0,-4.5 l -1,0 0,3 -0.5,0 0,-3 -1,0 0,3 -0.5,0 z m 8,0 c -0.77778,0 -2.00808,0.5162 -2.5,1.5 -0.38889,0.7777 -0.5,2.5 -0.5,3.5 l 0,3 c 0,0.5 0.61111,1 1,1 l 0,4 c 0,0.5 0.5,1 1,1 0.5,0 1,-0.5 1,-1 z"
           id="path14875"
           inkscape:connector-curvature="0" />
        <path
           inkscape:connector-curvature="0"
           id="rect6396-83"
           fill="blue"
           d="m 348,1052.3622 -1,0 c 0,1.2963 0,3.2037 0,4.5 0,0.7777 1,0.7222 1,1.5 l 0,7 c 0,0.3889 0.5,1 1,1 0.5,0 1,-0.5 1,-1 l 0,-7 c 0,-0.7778 1,-0.7223 1,-1.5 0,-1.2963 0,-3.2037 0,-4.5 l -1,0 0,3 -0.5,0 0,-3 -1,0 0,3 -0.5,0 z m 8,0 c -0.77778,0 -2.00808,0.5162 -2.5,1.5 -0.38889,0.7777 -0.5,2.5 -0.5,3.5 l 0,3 c 0,0.5 0.61111,1 1,1 l 0,4 c 0,0.5 0.5,1 1,1 0.5,0 1,-0.5 1,-1 z"
           style="color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
           sodipodi:nodetypes="cccsscsscccccccccccssscscsc" />
      </g>
      <rect
         y="1050.3622"
         x="341.99997"
         height="18.000031"
         width="18.000017"
         id="rect22284-4"
         style="opacity:0.5;color:#000000;fill:none;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
    </g>
  </g>
</svg>

index.html

<!doctype HTML>
<hmtl>
  <head>
    <meta charset="utf8">
    <style type="text/css">
      * {
        -webkit-transform-origin-x: 0px;
        -webkit-transform-origin-y: 0px;
        -webkit-transform-origin-z: initial;
      }
      .icon {
        width: 300px;
        height: 300px;
        fill: red;
      }
    </style>
  </head>
  <body>
    <p>Hello World!</p>
    <br>
    <!-- code from CSS Tricks: http://css-tricks.com/svg-use-external-source/ -->
    <!-- `<use>` shape defined in an EXTERNAL RESOURCE -->
    <svg viewBox="0 0 18 18" class="icon">
       <use xlink:href="cafe-18.svg#svg4619"></use>
    </svg>
  </body>
</hmtl>