Poor Image Quality when using SVGConverter in Batik to convert svg to png

Question

My converted image's quality is very low. I have tried using the setQuality method but it does not seem to change anything.

This is the part of the code that converts svg to png:

SVGConverter svgConverter = new SVGConverter();
String[] sources = { "C:/imageData.svg" };
svgConverter.setSources(sources);
svgConverter.setDestinationType(DestinationType.PNG);
svgConverter.setDst(new File("C:/image.png"));

Does anyone know how I could make the image quality better?

Answer 1

I use this code when converting SVG to PNG (using byte arrays):

private byte[] renderPng(byte[] svgBytes) {
    try {
        TranscoderInput transcoderInput = new TranscoderInput(new ByteArrayInputStream(svgBytes));
        ByteArrayOutputStream output = new ByteArrayOutputStream();
        TranscoderOutput transcoderOutput = new TranscoderOutput(output);

        Transcoder transcoder = null;
        String type = "png";
        if(type.equalsIgnoreCase("png")) { 
            transcoder = new PNGTranscoder()
            {
                @Override
                protected ImageRenderer createRenderer()
                {
                    ImageRenderer r = super.createRenderer();

                    RenderingHints rh = r.getRenderingHints();

                    rh.add(new RenderingHints(RenderingHints.KEY_ALPHA_INTERPOLATION,
                        RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY));
                    rh.add(new RenderingHints(RenderingHints.KEY_INTERPOLATION,
                        RenderingHints.VALUE_INTERPOLATION_BICUBIC));

                    rh.add(new RenderingHints(RenderingHints.KEY_ANTIALIASING,
                        RenderingHints.VALUE_ANTIALIAS_ON));

                    rh.add(new RenderingHints(RenderingHints.KEY_COLOR_RENDERING,
                        RenderingHints.VALUE_COLOR_RENDER_QUALITY));
                    rh.add(new RenderingHints(RenderingHints.KEY_DITHERING,
                        RenderingHints.VALUE_DITHER_DISABLE));

                    rh.add(new RenderingHints(RenderingHints.KEY_RENDERING,
                        RenderingHints.VALUE_RENDER_QUALITY));

                    rh.add(new RenderingHints(RenderingHints.KEY_STROKE_CONTROL,
                        RenderingHints.VALUE_STROKE_PURE));

                    rh.add(new RenderingHints(RenderingHints.KEY_FRACTIONALMETRICS,
                        RenderingHints.VALUE_FRACTIONALMETRICS_ON));
                    rh.add(new RenderingHints(RenderingHints.KEY_TEXT_ANTIALIASING,
                        RenderingHints.VALUE_TEXT_ANTIALIAS_OFF));

                    r.setRenderingHints(rh);

                    return r;
                }
            };

            transcoder.addTranscodingHint(PNGTranscoder.KEY_BACKGROUND_COLOR, Color.WHITE);
        } else {
            transcoder = new JPEGTranscoder();

            Float jpegQuality = new Float(0.95);
            // KEY_WIDTH - seems to pick it up just fine from the SVG charts.  Set to 560 otherwise.
            // KEY_QUALITY 0-1.0 with 1.0 being No Loss.  Value must be of type Float.  0.95 is 30% smaller and looks great.
            transcoder.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, jpegQuality);
        }

        // NOTE: for linux you need Java 1.4.1+ AND the headless environment (e.g. export JAVA_OPTS='-Djava.awt.headless=true').
        try {
            transcoder.transcode(transcoderInput, transcoderOutput);
        }
        catch(Exception e) {
            logger.error("SVG To Raster response transcode exception", e);
            if(output != null) {
                output.close();
            }
            throw( new RuntimeException("SVG To Raster Filter Response Stream Exception", e) );
        }

        if(output != null) {
            output.flush();
            output.close();
        }

        transcoderInput  = null;
        transcoderOutput = null;
        transcoder = null;

        return output.toByteArray();
    } catch (Exception exc) {
        logger.error("Error in rendering png method", exc);
    }
    return new byte[0];
}

Also, your clipPath elements in your SVG documents should contain this attribute, otherwise it will have strange artifacts:

<clipPath shape-rendering="geometricPrecision" ... >

Answer 2

In Apache Batik, you can change resolution by passing Transcoder hint KEY_PIXEL_UNIT_TO_MILLIMETER.

However the important aspect is that you need to scale your height & width to same scale as the new resolution you are seeking.

For example:

my SVG has 3.5 * 2.0 Inches (252 * 144 Pixels) size.

Target resolution is 600 DPI.

int RESOLUTION_DPI = 600;
float SCALE_BY_RESOLUTION = RESOLUTION_DPI / 72f;
float scaledWidth = 252*SCALE_BY_RESOLUTION;
float scaledHeight = 144*SCALE_BY_RESOLUTION;
float pixelUnitToMM = new Float(25.4f/RESOLUTION_DPI);

transcoderInput = new TranscoderInput(svgDocument);
TranscoderOutput transcoderOutput = new TranscoderOutput(ostream);
transcoder.addTranscodingHint(ImageTranscoder.KEY_BACKGROUND_COLOR, Color.WHITE);
transcoder.addTranscodingHint(PNGTranscoder.KEY_WIDTH, scaledWidth);
transcoder.addTranscodingHint(PNGTranscoder.KEY_HEIGHT, scaledHeight);

transcoder.addTranscodingHint(PNGTranscoder.KEY_PIXEL_UNIT_TO_MILLIMETER, pixelUnitToMM);

transcoder.transcode(transcoderInput, transcoderOutput);

Answer 3

Try this....

jpeg.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, new Float(keyQuality));
jpeg.addTranscodingHint(JPEGTranscoder.KEY_HEIGHT, height*scalePercentage);
jpeg.addTranscodingHint(JPEGTranscoder.KEY_WIDTH, width*scalePercentage);
jpeg.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, 1.0f);
jpeg.addTranscodingHint(JPEGTranscoder.KEY_BACKGROUND_COLOR, Color.WHITE);

You need to increase the height and width like set keyQuality 1.0f.

If height=200 increase height by 200*3(height*scalePercentage). Similar to width also