androidsvgandroidsvg

SVG to Bitmap to ImageView


In my android app I try to get a Bitmap-Object from a SVG-File and store it in the cache. Then it should be displayed from this bitmap in an ImageView Object. I don't get it working, either the ImageView gets a wrong density, the Picture is too small or too large. May anybody tell me whats wrong with that code? For my purposes I use the AndroidSVG library (link). The Image should has 30dp width and height.

Here you can see the result

        ImageView img = (ImageView)getView().findViewById(R.id.testingImage);
        try {
            int size = convertDPtoPixels(30);
            SVG svg = SVG.getFromResource(mGlob.mContext,R.raw.vectorimage);
            svg.setDocumentHeight(size);
            svg.setDocumentWidth(size);
            PictureDrawable pictureDrawable = new PictureDrawable(svg.renderToPicture());
            Bitmap mutableBitmap = Bitmap.createBitmap(30, 30, Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(mutableBitmap);
            pictureDrawable.setBounds(0,0,size,size);
            pictureDrawable.draw(canvas);
            img.setImageBitmap(mutableBitmap);
        } catch (SVGParseException e) {
            e.printStackTrace();
        }

Edit 30.3.2015

If I try to create the Bitmap with the Pixel-size like this, I get a too small Image (but it is sharp):

Bitmap mutableBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);

enter image description here

Addition Information:

The Blue Color is the background color, from my ImageView. I use it to see where it starts and end, because my SVG has transparent surfaces. The SVG should fill the blue area...

Here is my SVG-File:

<?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="30"
   height="30"
   id="svg15733"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="vectorimage.svg">
  <defs
     id="defs15735" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="9.1"
     inkscape:cx="21.063016"
     inkscape:cy="17.702822"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1366"
     inkscape:window-height="715"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     borderlayer="true"
     inkscape:showpageshadow="false" />
  <metadata
     id="metadata15738">
    <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="Ebene 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-1022.3622)">
    <path
       style="fill:#ffe71d;fill-opacity:1;stroke:#000000;stroke-width:0.3515625;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
       d="m 20.507812,1023.827 8.027344,8.0274 0,11.4258 -8.027344,7.6172 -11.4257807,0 -7.6171876,-7.6172 0,-11.4258 7.6171876,-8.0274 z"
       id="Auswahl"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccccccc" />
    <flowRoot
       xml:space="preserve"
       id="flowRoot16280"
       style="font-style:normal;font-weight:normal;font-size:72px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
         id="flowRegion16282"><rect
           id="rect16284"
           width="123.23861"
           height="98.994949"
           x="171.72594"
           y="179.65981" /></flowRegion><flowPara
         id="flowPara16286" /></flowRoot>    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:4.21875px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
       x="6.8066916"
       y="1049.5211"
       id="text16288"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan16290"
         x="6.8066916"
         y="1049.5211"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:31.46484184px;font-family:Tahoma;-inkscape-font-specification:'Tahoma Bold'">?</tspan></text>
    <path
       transform="translate(0,540.3622)"
       style="display:inline;fill:#000000;fill-opacity:0.09958508;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 9.0820313,483.46484 -4.048462,4.26636 21.1303707,17.43713 2.371216,-2.25036 0,-11.42578 -8.027344,-8.02735 -11.4257807,0 z"
       id="path16293"
       inkscape:connector-curvature="0" />
    <path
       transform="translate(0,540.3622)"
       style="display:inline;fill:#000000;fill-opacity:0.06639003;stroke:none;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
       d="m 9.0820313,483.46484 -7.6171876,8.02735 0,7.68493 25.0598143,-9.69543 -6.016846,-6.01685 -11.4257807,0 z"
       id="path16295"
       inkscape:connector-curvature="0" />
  </g>
</svg>

Solution

  • You appear to be rendering the SVG to a 30x30 bitmap then scaling it up to (size x size).

    Try changing the bitmap creation to:

    Bitmap mutableBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
    

    Update:

    The problem is that Inkscape doesn't automatically give it's SVG files a viewBox.

    Read this AndroidSVG FAQ question on how to deal with Inkscape files. https://code.google.com/p/androidsvg/wiki/FAQ#Dealing_with_Inkscape_files

    You can either follow the advice there (which updates the SVG programmatically at runtime). Or alternatively, alter the SVG by hand. Make the following changes:

    width="100%"
    height="100%"
    viewBox="0 0 30 30"
    

    <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="100%"
       height="100%"
       id="svg15733"
       version="1.1"
       inkscape:version="0.91 r13725"
       sodipodi:docname="vectorimage.svg"
       viewBox="0 0 30 30">
      <defs
         id="defs15735" />
      <sodipodi:namedview
         id="base"
         pagecolor="#ffffff"
         bordercolor="#666666"
         borderopacity="1.0"
         inkscape:pageopacity="0.0"
         inkscape:pageshadow="2"
         inkscape:zoom="9.1"
         inkscape:cx="21.063016"
         inkscape:cy="17.702822"
         inkscape:document-units="px"
         inkscape:current-layer="layer1"
         showgrid="false"
         inkscape:window-width="1366"
         inkscape:window-height="715"
         inkscape:window-x="-8"
         inkscape:window-y="-8"
         inkscape:window-maximized="1"
         borderlayer="true"
         inkscape:showpageshadow="false" />
      <metadata
         id="metadata15738">
        <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="Ebene 1"
         inkscape:groupmode="layer"
         id="layer1"
         transform="translate(0,-1022.3622)">
        <path
           style="fill:#ffe71d;fill-opacity:1;stroke:#000000;stroke-width:0.3515625;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
           d="m 20.507812,1023.827 8.027344,8.0274 0,11.4258 -8.027344,7.6172 -11.4257807,0 -7.6171876,-7.6172 0,-11.4258 7.6171876,-8.0274 z"
           id="Auswahl"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="ccccccccc" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot16280"
           style="font-style:normal;font-weight:normal;font-size:72px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
             id="flowRegion16282"><rect
               id="rect16284"
               width="123.23861"
               height="98.994949"
               x="171.72594"
               y="179.65981" /></flowRegion><flowPara
             id="flowPara16286" /></flowRoot>    <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:4.21875px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
           x="6.8066916"
           y="1049.5211"
           id="text16288"
           sodipodi:linespacing="125%"><tspan
             sodipodi:role="line"
             id="tspan16290"
             x="6.8066916"
             y="1049.5211"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:31.46484184px;font-family:Tahoma;-inkscape-font-specification:'Tahoma Bold'">?</tspan></text>
        <path
           transform="translate(0,540.3622)"
           style="display:inline;fill:#000000;fill-opacity:0.09958508;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           d="m 9.0820313,483.46484 -4.048462,4.26636 21.1303707,17.43713 2.371216,-2.25036 0,-11.42578 -8.027344,-8.02735 -11.4257807,0 z"
           id="path16293"
           inkscape:connector-curvature="0" />
        <path
           transform="translate(0,540.3622)"
           style="display:inline;fill:#000000;fill-opacity:0.06639003;stroke:none;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
           d="m 9.0820313,483.46484 -7.6171876,8.02735 0,7.68493 25.0598143,-9.69543 -6.016846,-6.01685 -11.4257807,0 z"
           id="path16295"
           inkscape:connector-curvature="0" />
      </g>
    </svg>