SVG to Bitmap to ImageView

旧城冷巷雨未停 提交于 2019-12-25 03:21:48

问题


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.

        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);

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>

回答1:


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>


来源:https://stackoverflow.com/questions/29335251/svg-to-bitmap-to-imageview

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!