svgdotjs/svg.import.js

It doesn't import my SVG file (made with Inkscape)

EmanueleSabetta opened this issue · 6 comments

I've tried the import test but it doesn't display anything. I've pasted the svg content in the dialog box, with no results.

This is my SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" version="1.2" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 210" xmlns:dc="http://purl.org/dc/elements/1.1/">
 <defs id="defs4">
  <filter id="filter4017" height="1.5" width="1.5" color-interpolation-filters="sRGB" y="-.25" x="-.25" filterRes="2048">
   <feGaussianBlur id="feGaussianBlur4019" result="blur" stdDeviation="1.4" in="SourceAlpha"/>
   <feColorMatrix id="feColorMatrix4021" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.99 0 " type="matrix" result="bluralpha"/>
   <feOffset id="feOffset4023" result="offsetBlur" dy="2" dx="0" in="bluralpha"/>
   <feMerge id="feMerge4025">
    <feMergeNode id="feMergeNode4027" in="offsetBlur"/>
    <feMergeNode id="feMergeNode4029" in="SourceGraphic"/>
   </feMerge>
  </filter>
  <linearGradient id="linearGradient3949" y2="427.54" xlink:href="#linearGradient2209" gradientUnits="userSpaceOnUse" x2="272.03" gradientTransform="matrix(-.057923 .015520 -.015929 -.059447 121.64 465.79)" y1="262.87" x1="249.48"/>
  <linearGradient id="linearGradient3946" y2="553.74" xlink:href="#linearGradient2209" gradientUnits="userSpaceOnUse" x2="380.68" gradientTransform="matrix(.059966 0 0 .061544 68.771 409)" y1="296.37" x1="264.58"/>
  <linearGradient id="linearGradient2209">
   <stop id="stop2211" stop-color="#fff" offset="0"/>
   <stop id="stop2213" stop-color="#fff" stop-opacity="0" offset="1"/>
  </linearGradient>
 </defs>
 <metadata id="metadata7">
  <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/>
   </cc:Work>
  </rdf:RDF>
 </metadata>
 <g id="layer1" transform="translate(0 -842.36)">
  <flowRoot id="flowRoot3822" style="word-spacing:0px;letter-spacing:0px;text-anchor:middle;text-align:center" xml:space="preserve" font-size="40px" line-height="125%" font-family="Oregon LDO" fill="#000000"><flowRegion id="flowRegion3824"><rect id="rect3826" y="11.557" width="308.54" x="15.823" height="133.61"/></flowRegion><flowPara id="flowPara3828"/></flowRoot>
  <text id="text3276" style="word-spacing:0px;letter-spacing:1px;text-anchor:middle;text-align:center" xml:space="preserve" font-size="40px" line-height="125%" y="910.01984" x="263.02176" font-family="Oregon LDO" fill="#000000"><tspan id="tspan3278" y="910.01984" x="263.52176">GUIDA</tspan><tspan id="tspan3280" y="960.01984" x="263.52176">ALLA</tspan><tspan id="tspan3282" y="1010.0198" x="263.52176">ISCRIZIONE</tspan></text>
  <g id="layer1-3" transform="matrix(3.2934 0 0 3.2934 -198.86 -505.68)">
   <g id="g4009" filter="url(#filter4017)">
    <path id="path3059" d="m634.29 559.51a250 250 0 1 1 -500 0 250 250 0 1 1 500 0z" fill-rule="evenodd" transform="matrix(.058927 0 0 .058927 68.784 407.96)" stroke="#cb0000" stroke-width="19.959" fill="#d1b02a"/>
    <path id="path3061" d="m95.01 454.04c3.6576-0.98004 6.5623-3.3909 8.3013-6.4953 2.8243-6.6862-7.7133 8.9678-16.417 6.124 2.5302 0.92793 5.341 1.1147 8.1157 0.37126z" fill-rule="evenodd" fill="url(#linearGradient3949)"/>
    <path id="path3063" d="m91.451 427.24c-7.5731 0-13.719 6.3077-13.719 14.08 0 1.0512 0.11665 2.0743 0.32981 3.0599 7.5286-14.492 15.64-5.3698 26.098-8.3623-2.0423-5.146-6.9639-8.7777-12.709-8.7777z" fill-rule="evenodd" fill="url(#linearGradient3946)"/>
    <g id="g3932" fill="#fff" transform="matrix(1.0779 0 0 1.0779 -7.0498 -34.34)">
     <path id="text9068" d="m89.684 447.6c0-0.38871 0.1336-0.71821 0.40068-0.98889 0.2672-0.27069 0.59851-0.40583 0.99404-0.40583 0.38163 0 0.70778 0.13528 0.97846 0.40583s0.40595 0.60018 0.40595 0.98889c0 0.38162-0.1354 0.70764-0.40595 0.97846-0.27068 0.27055-0.59671 0.40583-0.97846 0.40583-0.39553 0-0.72683-0.13361-0.99404-0.40068-0.26708-0.26721-0.40068-0.59517-0.40068-0.98361zm-2.3002-13.77c0.73546-0.32615 1.4346-0.5689 2.0972-0.72864 0.6626-0.1596 1.2854-0.23927 1.8682-0.23939 1.5404 0 2.7565 0.3712 3.6482 1.1137 0.89158 0.74252 1.3376 1.7452 1.3376 3.008 0 1.2906-0.38343 2.3454-1.1502 3.1641-0.76686 0.81872-1.9238 1.4051-3.4712 1.7591v2.6437h-1.2803v-3.4139c1.2282-0.29835 2.1528-0.79801 2.7737-1.4988 0.62103-0.70083 0.93148-1.5924 0.93161-2.6749-0.000128-0.95066-0.25343-1.7-0.75991-2.2482-0.50661-0.54818-1.1969-0.82221-2.0712-0.82221-0.79106 0-1.4381 0.22731-1.9412 0.68179-0.503 0.45448-0.82748 1.1084-0.97318 1.9619h-1.0096v-2.7063z"/>
     <path id="path3162" fill-opacity=".61836" d="m89.568 447.92c0-0.4041 0.14292-0.74666 0.42863-1.0281 0.28584-0.28139 0.64025-0.4219 1.0634-0.4219 0.40825 0 0.75715 0.14065 1.0467 0.4219 0.28956 0.2813 0.43427 0.62398 0.43427 1.0281 0 0.39675-0.14485 0.7357-0.43427 1.0172-0.28956 0.28128-0.63833 0.42192-1.0467 0.42192-0.42312 0-0.77753-0.13889-1.0634-0.41654-0.28571-0.27779-0.42863-0.61873-0.42863-1.0226zm-2.4606-14.316c0.78676-0.33907 1.5347-0.59146 2.2435-0.7575 0.70883-0.16595 1.3751-0.24876 1.9986-0.24891 1.6479 0 2.9488 0.38591 3.9027 1.1579 0.95377 0.77194 1.4309 1.8144 1.4309 3.1272 0 1.3418-0.41018 2.4383-1.2304 3.2895-0.82035 0.8512-2.058 1.4608-3.7133 1.8288v2.7485h-1.369v-3.5492c1.3138-0.3102 2.303-0.82965 2.9672-1.5583 0.66435-0.72861 0.99646-1.6555 0.99659-2.7809-0.000136-0.9883-0.27111-1.7674-0.81292-2.3373-0.54195-0.56986-1.2804-0.85475-2.2157-0.85475-0.84624 0-1.5384 0.23634-2.0766 0.7088-0.53808 0.4725-0.8852 1.1524-1.0411 2.0397h-1.08v-2.8135z"/>
    </g>
   </g>
  </g>
 </g>
</svg>

maybe defs are not supported: https://github.com/wout/svg.import.js#to-do

did you try removing the comments (at the top)? did you try vacuum the defs? (inkscape file/vacuum...)

try removing the defs from your svg, it displays something. well as it is said, support for defs is not yet complete.

When the defs support would be completed? I'd say that my sample it's a pretty basic svg icon + text.
Here is how the browser renders it:
basic_test_svg_firefox_rendered

wout commented

HI,
Currently I am working on different parts of svg.js. the import plugin has no priority at the moment. But any help is more than welcome as I am working on this project alone at the moment.

Why this bug has been closed? I've just checked and the import still doesn't work.

wout commented

Because it is not a bug, rather not implemented. I develop svg.js as I go, so features I need will be implemented. I already wrote the base of the svg.filter.js plugin but it needs more work. When the filters are fully implemented I can add support to the import plugin.

Also, your file is using svg version 1.2. This spec was never completed and the flowRoot element never implemented in svg 1.1. Some browsers don't support it so I am unable to implement this element. You'll have to convert the flowRoot element in Inkscape to a text element.