Question

I’m trying to create jsp page which will create a svg graphic file. Based on various examples of jsp pages and svgs i come with this:

<?xml version="1.0" encoding="UTF-8"?> 

<%@ page language="java" contentType="image/svg+xml; charset=UTF-8;"    pageEncoding="UTF-8"%>

<%
response.addHeader(
        "Content-Disposition","attachment; filename=blob3" );
%>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="140" width="140" viewBox="0 0 14 14">
  <circle cx="7" cy="7" r="6" fill="blue" />
</svg>

but it is not working. it allows me to download blob3.svg file, but it is empty file.

Can anyone could give me hint, what i’m doing wrong?

Answer 1

I think your Content-Disposition cause the download.

Here is a complete example that is working for many years for me :

<%@ page
    import = "com.spectotechnologies.util.XML"
    import = "com.spectotechnologies.website.systems.reports.helper.Report"
    import = "com.spectotechnologies.website.systems.helper.MeasurePoint"
    import = "com.spectotechnologies.website.systems.reports.helper.ReportPeriod"
    import = "com.spectotechnologies.website.systems.reports.helper.ReportField"
    import = "java.sql.Date"
    import = "java.text.NumberFormat"
    import = "java.text.SimpleDateFormat"

    contentType = "image/svg+xml"
%>
<jsp:useBean id="report" scope="request" class="com.spectotechnologies.website.systems.reports.helper.Report" />
<%
    Integer iACSSystemKey;
    int nTotal;

    int nTotalLength;
    int nPeriodLength;
    int nMeasuresQuantity;

    nTotalLength = (int)(report.getFinalDate().getTime() - report.getInitialDate().getTime());
    nPeriodLength = nTotalLength / report.getPeriodsCount();

    nMeasuresQuantity = 0;

    for(nTotal = 0;nTotal < report.getFooter().getFieldsCount();nTotal++)
    {
        nMeasuresQuantity = nMeasuresQuantity + report.getFooter().getField(nTotal).getValuesCount();
    }
%>
<% 
    MeasurePoint oMeasurePoint;
    ReportPeriod oPeriod;
    ReportField oField;
    String sMeasurePointTag;
    String sMeasurePointsHeader;
    String sDateHeader;
    ReportPeriod oFooter;
    String sRowColor = "#E9E9E9";

    String sDate = new String("");

    int nMeasurePoints, nMeasurePoint;
    int nPeriods, nPeriod;
    int nFields, nField;

    SimpleDateFormat oDateFormat;
    NumberFormat oValueFormat = NumberFormat.getInstance();

    String[] sCurvesColors = { "blue", "red", "green", "violet", "brown", "violet", "orange", "yellow", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray", "gray" };
    String sColor;

    oFooter = report.getFooter();
%>

<%
    int nTotalWidth = 1020;
    int nTotalHeight = 450;
    int nBorder = 5;

    int nLegendWidth = 140;
    int nLegendHeight = 300;
    int nLegendX = nTotalWidth - 2 * nBorder - nLegendWidth;
    int nLegendY = 40;

    int nGraphicWidth = 750;
    int nGraphicHeight = 300;
    int nGraphicX = 65;
    int nGraphicY = 40;

    double dMinimumLeftScale = 0;
    double dMaximumLeftScale = 60;
    int nLeftScaleDigits = 0;

    double dMinimumRightScale = 0;
    double dMaximumRightScale = 100;
    int nRightScaleDigits = 0;

    String sLeftScaleTitle = "";
    String sRightScaleTitle = "";
%>

<svg width="<%= nTotalWidth %>" height="<%= nTotalHeight %>" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<!-- External border of the graphic -->
<rect x="<%= nBorder %>" y="<%= nBorder %>" width="<%= (nTotalWidth - (2 * nBorder)) %>" height="<%= (nTotalHeight - (2 * nBorder)) %>" fill="white" stroke="black" stroke-width="1" stroke-opacity="1" shape-rendering="crispEdges" />

<!-- Main title -->
<%
    oDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
%>
<text x="<%= (nGraphicX + nGraphicWidth / 2) %>" y="20" style="font-family: sans-serif; font-weight: bold; font-size: 10px;" text-anchor="middle">R&#233;sultats du <%= oDateFormat.format(report.getInitialDate()) %> au <%= oDateFormat.format(report.getFinalDate()) %></text>

<!-- Legend -->
<rect x="<%= nLegendX %>" y="<%= nLegendY %>" width="<%= nLegendWidth %>" height="<%= nLegendHeight %>" fill="white" stroke="black" stroke-width="1" stroke-opacity="1" shape-rendering="crispEdges" />
<text x="<%= (nLegendX + nLegendWidth / 2)  %>" y="<%= (nLegendY + 15) %>" style="font-family: sans-serif; font-weight: bold; font-size: 10px;" text-anchor="middle">L&#233;gende</text>

<%
    nMeasurePoints = report.getMeasurePointsCount();
    for(nMeasurePoint = 0;nMeasurePoint < nMeasurePoints;nMeasurePoint++)
    {
        sColor = sCurvesColors[nMeasurePoint];

        oMeasurePoint = report.getMeasurePoint(nMeasurePoint);
        if(oMeasurePoint.getUnit().length() > 0)
        {
            sMeasurePointTag = new String(oMeasurePoint.getName() + " (" + oMeasurePoint.getUnit() + ")");
        }
        else
        {
            sMeasurePointTag = oMeasurePoint.getName();
        }

        // Set scales from inputs unit
        if((sLeftScaleTitle.compareTo(oMeasurePoint.getUnit()) != 0) && (sRightScaleTitle.compareTo(oMeasurePoint.getUnit()) != 0))
        {
            if(sLeftScaleTitle.length() == 0)
            {
                sLeftScaleTitle = oMeasurePoint.getUnit();
                dMinimumLeftScale = oFooter.getField(nMeasurePoint).getMinimum();
                dMaximumLeftScale = oFooter.getField(nMeasurePoint).getMaximum();
                nLeftScaleDigits = oMeasurePoint.getValuePrecision();
            }
            else if(sRightScaleTitle.length() == 0)
            {
                sRightScaleTitle = oMeasurePoint.getUnit();
                dMinimumRightScale = oFooter.getField(nMeasurePoint).getMinimum();
                dMaximumRightScale = oFooter.getField(nMeasurePoint).getMaximum();
                nRightScaleDigits = oMeasurePoint.getValuePrecision();
            }
        }

        // Set scales minimum and maximum
        if(sLeftScaleTitle.compareTo(oMeasurePoint.getUnit()) == 0)
        {
            if(dMinimumLeftScale > oFooter.getField(nMeasurePoint).getMinimum())
            {
                dMinimumLeftScale = oFooter.getField(nMeasurePoint).getMinimum();
            }

            if(dMaximumLeftScale < oFooter.getField(nMeasurePoint).getMaximum())
            {
                dMaximumLeftScale = oFooter.getField(nMeasurePoint).getMaximum();
            }
        }
        else if(sRightScaleTitle.compareTo(oMeasurePoint.getUnit()) == 0)
        {
            if(dMinimumRightScale > oFooter.getField(nMeasurePoint).getMinimum())
            {
                dMinimumRightScale = oFooter.getField(nMeasurePoint).getMinimum();
            }

            if(dMaximumRightScale < oFooter.getField(nMeasurePoint).getMaximum())
            {
                dMaximumRightScale = oFooter.getField(nMeasurePoint).getMaximum();
            }
        }
%>
    <circle cx="<%= nLegendX + 10 %>" cy="<%= (nLegendY + 42 + nMeasurePoint * 15) %>" r="2" fill="<%= sColor %>" />
    <text x="<%= (nLegendX + 20)  %>" y="<%= (nLegendY + 45 + nMeasurePoint * 15) %>" style="font-family: sans-serif; font-weight: bold; font-size: 10px;"><%= XML.encode(sMeasurePointTag) %></text>
<%
    }
%>

<!-- Graphic -->
<rect x="<%= nGraphicX  %>" y="<%= nGraphicY %>" width="<%= nGraphicWidth %>" height="<%= nGraphicHeight %>" fill="white" stroke="black" stroke-width="1" stroke-opacity="1" shape-rendering="crispEdges" />

<!-- Left scale -->
<defs>
    <path id="leftScaleTitle" d="M <%= (nGraphicX - 40) %> <%= (nGraphicY + nGraphicHeight) %> L <%= (nGraphicX - 40) %> <%= nGraphicY %>" />
    <path id="rightScaleTitle" d="M <%= (nGraphicX + nGraphicWidth + 50) %> <%= (nGraphicY + nGraphicHeight) %> L <%= (nGraphicX + nGraphicWidth + 50) %> <%= nGraphicY %>" />
</defs>
<text style="font-family: sans-serif; font-weight: bold; font-size: 12pt;">
    <textPath xlink:href="#leftScaleTitle" text-anchor="middle" startOffset="50%"><%= XML.encode(sLeftScaleTitle) %></textPath>
</text>

<%
    int nY;
    int nLabel;
    int nLabels = 10;
    String sLabel;

    NumberFormat oLabelFormat = NumberFormat.getInstance();

    oLabelFormat.setMinimumFractionDigits(nLeftScaleDigits);
    oLabelFormat.setMaximumFractionDigits(nLeftScaleDigits);

    for(nLabel = 0;nLabel <= nLabels;nLabel++)
    {
        nY = nGraphicY + nGraphicHeight - ((nGraphicHeight * nLabel) / nLabels);
        sLabel = oLabelFormat.format(dMinimumLeftScale + ((dMaximumLeftScale - dMinimumLeftScale) / nLabels) * nLabel);
%>
    <line x1="<%= (nGraphicX - 5) %>" y1="<%= nY %>" x2="<%= nGraphicX %>" y2="<%= nY %>" stroke="black" stroke-width="1" stroke-linecap="square" stroke-opacity="1" shape-rendering="crispEdges" />
    <text x="<%= (nGraphicX - 10) %>" y="<%= nY + 3 %>" style="font-family: sans-serif; font-size: 9px;" text-anchor="end"><%= sLabel %></text>
    <line x1="<%= nGraphicX %>" y1="<%= nY %>" x2="<%= (nGraphicX + nGraphicWidth) %>" y2="<%= nY %>" stroke="black" stroke-width="1" stroke-linecap="square" stroke-opacity="0.3" shape-rendering="crispEdges" stroke-dasharray="5, 5" />
<%
    }
%>

<!-- Right scale -->
<%
    if(!sRightScaleTitle.isEmpty())
    {
%>
    <text style="font-family: sans-serif; font-weight: bold; font-size: 12pt;">
        <textPath xlink:href="#rightScaleTitle" text-anchor="middle" startOffset="50%"><%= XML.encode(sRightScaleTitle) %></textPath>
    </text>

<%
        nLabels = 10;

        oLabelFormat.setMinimumFractionDigits(nRightScaleDigits);
        oLabelFormat.setMaximumFractionDigits(nRightScaleDigits);

        for(nLabel = 0;nLabel <= nLabels;nLabel++)
        {
            nY = nGraphicY + nGraphicHeight - ((nGraphicHeight * nLabel) / nLabels);
            sLabel = oLabelFormat.format(dMinimumRightScale + ((dMaximumRightScale - dMinimumRightScale) / nLabels) * nLabel);
%>
        <line x1="<%= (nGraphicX + nGraphicWidth) %>" y1="<%= nY %>" x2="<%= (nGraphicX + nGraphicWidth + 5) %>" y2="<%= nY %>" stroke="black" stroke-width="1" stroke-linecap="square" stroke-opacity="1" shape-rendering="crispEdges" />
        <text x="<%= (nGraphicX + nGraphicWidth + 35) %>" y="<%= nY + 3 %>" style="font-family: sans-serif; font-size: 9px;" text-anchor="end"><%= sLabel %></text>
        <line x1="<%= nGraphicX %>" y1="<%= nY %>" x2="<%= (nGraphicX + nGraphicWidth) %>" y2="<%= nY %>" stroke="black" stroke-width="1" stroke-linecap="square" stroke-opacity="0.3" shape-rendering="crispEdges" stroke-dasharray="5, 5" />
<%
        }
    }
%>

<!-- Bottom scale -->
<text x="<%= (nGraphicX + nGraphicWidth / 2) %>" y="<%= (nGraphicY + nGraphicHeight + 80) %>" style="font-family: sans-serif; font-weight: bold; font-size: 12px;" text-anchor="middle">Temps</text>

<%
    int nX;
    String sLabelDate = "";
    String sLabelHour = "";
    String sLastLabelDate = "";

    nLabels = report.getPeriodsCount();

    int nLabelDelta = nLabels / 20;

    for(nLabel = 0;nLabel <= nLabels;nLabel+=nLabelDelta)
    {
        nX = nGraphicX + ((nLabel * nGraphicWidth) / nLabels);

        if(nLabel < report.getPeriodsCount())
        {
            oPeriod = report.getPeriod(nLabel);

            oDateFormat = new SimpleDateFormat("yyyy-MM-dd");
            sLabelDate = oDateFormat.format(oPeriod.getInitialDate());

            oDateFormat = new SimpleDateFormat("HH:mm:ss");
            sLabelHour = oDateFormat.format(oPeriod.getInitialDate());
%>
    <line x1="<%= nX %>" y1="<%= (nGraphicY + nGraphicHeight) %>" x2="<%= nX %>" y2="<%= (nGraphicY + nGraphicHeight + 5) %>" stroke="black" stroke-width="1" stroke-linecap="square" stroke-opacity="1" shape-rendering="crispEdges" />
    <line x1="<%= nX %>" y1="<%= nGraphicY %>" x2="<%= nX %>" y2="<%= (nGraphicY + nGraphicHeight) %>" stroke="black" stroke-width="1" stroke-linecap="square" stroke-opacity="0.3" shape-rendering="crispEdges" stroke-dasharray="5, 5" />
<%
            if(sLastLabelDate.compareTo(sLabelDate) != 0)
            {
%>
    <defs>
        <path id="labelDate<%= nLabel %>" d="M <%= (nX - 4) %> <%= (nGraphicY + nGraphicHeight + 65) %> L <%= (nX - 4) %> 50" />
        <path id="labelHour<%= nLabel %>" d="M <%= (nX + 10) %> <%= (nGraphicY + nGraphicHeight + 65) %> L <%= (nX + 10) %> 50" />
    </defs>
    <text style="font-family: sans-serif; font-size: 9px; font-weight: bold;">
        <textPath xlink:href="#labelDate<%= nLabel %>"><%= sLabelDate %></textPath>
    </text>
    <text style="font-family: sans-serif; font-size: 9px;">
        <textPath xlink:href="#labelHour<%= nLabel %>"><%= sLabelHour %></textPath>
    </text>
<%
                sLastLabelDate = sLabelDate;
            }
            else
            {
%>
    <defs>
        <path id="labelHour<%= nLabel %>" d="M <%= (nX + 4) %> <%= (nGraphicY + nGraphicHeight + 65) %> L <%= (nX + 4) %> 50" />
    </defs>
    <text style="font-family: sans-serif; font-size: 9px;">
        <textPath xlink:href="#labelHour<%= nLabel %>"><%= sLabelHour %></textPath>
    </text>
<%
            }
        }
    }
%>

<!-- Curves -->
<%
    double dValue;

    boolean bLastPoint;
    int nLastX = 0;
    int nLastY = 0;
    double dMinimumScale = 0;
    double dMaximumScale = 0;

    nMeasurePoints = report.getMeasurePointsCount();
    for(nMeasurePoint = 0;nMeasurePoint < nMeasurePoints;nMeasurePoint++)
    {
        oMeasurePoint = report.getMeasurePoint(nMeasurePoint);

        bLastPoint = false;

        sColor = sCurvesColors[nMeasurePoint];

        if(sLeftScaleTitle.compareTo(oMeasurePoint.getUnit()) == 0)
        {
            dMinimumScale = dMinimumLeftScale;
            dMaximumScale = dMaximumLeftScale;
        }
        else if(sRightScaleTitle.compareTo(oMeasurePoint.getUnit()) == 0)
        {
            dMinimumScale = dMinimumRightScale;
            dMaximumScale = dMaximumRightScale;
        }
        else
        {
            dMinimumScale = 0;
            dMaximumScale = 1000;
        }

        nPeriods = report.getPeriodsCount();
        for(nPeriod = 0;nPeriod < nPeriods;nPeriod++)
        {
            oPeriod = report.getPeriod(nPeriod);

            oField = oPeriod.getField(nMeasurePoint);

            if(oField.getValuesCount() > 0)
            {
                nX = nGraphicX + ((nPeriod * nGraphicWidth) / nPeriods);

                dValue = oField.getAverage() - dMinimumScale;

                nY = nGraphicY + nGraphicHeight - (int)(nGraphicHeight * (dValue / (dMaximumScale - dMinimumScale)));

                if(bLastPoint)
                {
%>
    <line x1="<%= nLastX %>" y1="<%= nLastY %>" x2="<%= nX %>" y2="<%= nY %>" stroke="<%= sColor %>" />
<%
                }

                bLastPoint = true;
                nLastX = nX;
                nLastY = nY;

            }
            else
            {
                bLastPoint = false;
            }
        }
    }
%>

</svg>