html template to pdf with images












0















I am using django and trying to render invoice pdf, pdf is generating successfully but images are not in pdf.



Actually I want to add barcode image, so I dynamically generated a .svg file, but don't know how to put it into pdf.



Here is what I am doing ..



from io import BytesIO

from django.http import HttpResponse

from django.template.loader import get_template



from xhtml2pdf import pisa



def render_to_pdf(template_src, context_dict={}):

    template = get_template(template_src)

    html  = template.render(context_dict)

    result = BytesIO()

    pdf = pisa.pisaDocument(BytesIO(html.encode("ISO-8859-1")), result)

    if not pdf.err:

        return HttpResponse(result.getvalue(), content_type='application/pdf')

    return None


html - 



  <body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

              <span>

                {{ package_no_barcode }}

                <br>

                {{ package.package_no }}

                ....


view - 



class GenerateInvoicePdf(View):

    def get(self, request, *args, **kwargs):

        package = Package.objects.get(package_no=request.GET.get('package'))

        address = package.purchase.order_product.delivery_location

        CODE128 = barcode.get_barcode_class('code128')

        package_no_barcode = CODE128(u'{pkg_no}'.format(pkg_no=package.package_no))

        if request.user.display_username == seller.display_username:

            data = {

                 'package':package,

                 'address':address,

                 'package_no_barcode':package_no_barcode,

             }

            pdf = render_to_pdf('pdf/invoice.html', data)

            if pdf:

                response = HttpResponse(pdf, content_type='application/pdf')

                filename = "Invoice_%s.pdf" %(package)

                content = "inline; filename='%s'" %(filename)

                download = request.GET.get("download")

                if download:

                    content = "attachment; filename='%s'" %(filename)

                response['Content-Disposition'] = content

                return response

        return HttpResponse("Not found")


I also tried with cid - <img src="cid:{{ package_no_barcode }}" alt="{{ package.package_no }}">



Example of svg generated



CODE128 = barcode.get_barcode_class('code128')

package_no_barcode = CODE128(u'PLAI73664PJHS')

package_no_barcode.save('PSKK')


generate svg - 






<svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>





Update - using .render, - 'package_no_barcode':package_no_barcode.render, i can get the svg code but not for html - 



b'<?xml version="1.0" encoding="UTF-8"?>rn<!DOCTYPE svgrn PUBLIC '-//W3C//DTD SVG 1.1//EN'rn

'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>rn<svg height="23.000mm" version="1.1" width="38.000mm" xmlns="http://www.w3.org/2000/svg">rn

<!--Autogenerated with python-barcode 0.9.0-->rn <g id="barcode_group">rn <rect height="100%" style="fill:white" width="100%"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="2.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="4.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.140mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.600mm" x="5.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="5.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="6.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="6.940mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.200mm" x="8.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.340mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="8.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="8.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="9.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="10.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="10.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="10.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="11.140mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.600mm" x="11.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="11.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.600mm" x="12.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="12.940mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.200mm" x="13.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="13.740mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="14.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="14.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="14.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="15.740mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="16.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.200mm" x="16.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="16.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="17.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm"

x="17.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="17.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="18.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.740mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="19.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="20.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm"

x="20.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="21.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="21.540mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="21.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="22.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="22.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.200mm" x="23.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="23.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="23.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="24.540mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="24.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="25.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="26.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="26.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="28.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="28.540mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.600mm" x="28.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="29.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.740mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="29.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="30.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="30.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="31.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="31.540mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.200mm" x="32.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm"

x="32.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="33.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="33.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="34.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.200mm" x="35.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="35.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>rn <text

style="fill:black;font-size:10pt;text-anchor:middle;" x="19.240mm" y="21.000mm">UXXWL94HXO08</text>rn </g>rn</svg>rn'


How to make svg image with this code ?






python django python-3.x django-templates







share|improve this question

























  • Have you tried to put the svg code directly into the template using the <svg> tag and not the <img> tag? more. Could you add an example of the svg you are generating?

    – pazitos10
    Jan 18 at 20:25













  • Make sure your var package_no_barcode is an absolute url, not relative.

    – trinchet
    Jan 18 at 20:28











  • actually when I put it into <svg> tags I am getting the text of barcode

    – Pankaj Sharma
    Jan 18 at 20:28











  • @trinchet I don't want to save these svg files

    – Pankaj Sharma
    Jan 18 at 20:29













  • @pazitos10 I have added the example of generated svg

    – Pankaj Sharma
    Jan 18 at 20:37
















0















I am using django and trying to render invoice pdf, pdf is generating successfully but images are not in pdf.



Actually I want to add barcode image, so I dynamically generated a .svg file, but don't know how to put it into pdf.



Here is what I am doing ..



from io import BytesIO

from django.http import HttpResponse

from django.template.loader import get_template



from xhtml2pdf import pisa



def render_to_pdf(template_src, context_dict={}):

    template = get_template(template_src)

    html  = template.render(context_dict)

    result = BytesIO()

    pdf = pisa.pisaDocument(BytesIO(html.encode("ISO-8859-1")), result)

    if not pdf.err:

        return HttpResponse(result.getvalue(), content_type='application/pdf')

    return None


html - 



  <body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

              <span>

                {{ package_no_barcode }}

                <br>

                {{ package.package_no }}

                ....


view - 



class GenerateInvoicePdf(View):

    def get(self, request, *args, **kwargs):

        package = Package.objects.get(package_no=request.GET.get('package'))

        address = package.purchase.order_product.delivery_location

        CODE128 = barcode.get_barcode_class('code128')

        package_no_barcode = CODE128(u'{pkg_no}'.format(pkg_no=package.package_no))

        if request.user.display_username == seller.display_username:

            data = {

                 'package':package,

                 'address':address,

                 'package_no_barcode':package_no_barcode,

             }

            pdf = render_to_pdf('pdf/invoice.html', data)

            if pdf:

                response = HttpResponse(pdf, content_type='application/pdf')

                filename = "Invoice_%s.pdf" %(package)

                content = "inline; filename='%s'" %(filename)

                download = request.GET.get("download")

                if download:

                    content = "attachment; filename='%s'" %(filename)

                response['Content-Disposition'] = content

                return response

        return HttpResponse("Not found")


I also tried with cid - <img src="cid:{{ package_no_barcode }}" alt="{{ package.package_no }}">



Example of svg generated



CODE128 = barcode.get_barcode_class('code128')

package_no_barcode = CODE128(u'PLAI73664PJHS')

package_no_barcode.save('PSKK')


generate svg - 






<svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>





Update - using .render, - 'package_no_barcode':package_no_barcode.render, i can get the svg code but not for html - 



b'<?xml version="1.0" encoding="UTF-8"?>rn<!DOCTYPE svgrn PUBLIC '-//W3C//DTD SVG 1.1//EN'rn

'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>rn<svg height="23.000mm" version="1.1" width="38.000mm" xmlns="http://www.w3.org/2000/svg">rn

<!--Autogenerated with python-barcode 0.9.0-->rn <g id="barcode_group">rn <rect height="100%" style="fill:white" width="100%"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="2.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="4.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.140mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.600mm" x="5.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="5.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="6.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="6.940mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.200mm" x="8.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.340mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="8.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="8.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="9.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="10.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="10.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="10.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="11.140mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.600mm" x="11.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="11.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.600mm" x="12.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="12.940mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.200mm" x="13.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="13.740mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="14.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="14.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="14.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="15.740mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="16.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.200mm" x="16.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="16.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="17.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm"

x="17.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="17.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="18.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.740mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="19.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="20.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm"

x="20.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="21.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="21.540mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="21.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="22.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="22.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.200mm" x="23.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="23.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="23.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="24.540mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="24.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="25.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="26.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="26.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="28.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="28.540mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.600mm" x="28.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="29.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.740mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="29.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="30.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="30.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="31.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="31.540mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.200mm" x="32.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm"

x="32.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="33.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="33.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="34.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.200mm" x="35.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="35.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>rn <text

style="fill:black;font-size:10pt;text-anchor:middle;" x="19.240mm" y="21.000mm">UXXWL94HXO08</text>rn </g>rn</svg>rn'


How to make svg image with this code ?






python django python-3.x django-templates







share|improve this question

























  • Have you tried to put the svg code directly into the template using the <svg> tag and not the <img> tag? more. Could you add an example of the svg you are generating?

    – pazitos10
    Jan 18 at 20:25













  • Make sure your var package_no_barcode is an absolute url, not relative.

    – trinchet
    Jan 18 at 20:28











  • actually when I put it into <svg> tags I am getting the text of barcode

    – Pankaj Sharma
    Jan 18 at 20:28











  • @trinchet I don't want to save these svg files

    – Pankaj Sharma
    Jan 18 at 20:29













  • @pazitos10 I have added the example of generated svg

    – Pankaj Sharma
    Jan 18 at 20:37














0












0








0








I am using django and trying to render invoice pdf, pdf is generating successfully but images are not in pdf.



Actually I want to add barcode image, so I dynamically generated a .svg file, but don't know how to put it into pdf.



Here is what I am doing ..



from io import BytesIO

from django.http import HttpResponse

from django.template.loader import get_template



from xhtml2pdf import pisa



def render_to_pdf(template_src, context_dict={}):

    template = get_template(template_src)

    html  = template.render(context_dict)

    result = BytesIO()

    pdf = pisa.pisaDocument(BytesIO(html.encode("ISO-8859-1")), result)

    if not pdf.err:

        return HttpResponse(result.getvalue(), content_type='application/pdf')

    return None


html - 



  <body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

              <span>

                {{ package_no_barcode }}

                <br>

                {{ package.package_no }}

                ....


view - 



class GenerateInvoicePdf(View):

    def get(self, request, *args, **kwargs):

        package = Package.objects.get(package_no=request.GET.get('package'))

        address = package.purchase.order_product.delivery_location

        CODE128 = barcode.get_barcode_class('code128')

        package_no_barcode = CODE128(u'{pkg_no}'.format(pkg_no=package.package_no))

        if request.user.display_username == seller.display_username:

            data = {

                 'package':package,

                 'address':address,

                 'package_no_barcode':package_no_barcode,

             }

            pdf = render_to_pdf('pdf/invoice.html', data)

            if pdf:

                response = HttpResponse(pdf, content_type='application/pdf')

                filename = "Invoice_%s.pdf" %(package)

                content = "inline; filename='%s'" %(filename)

                download = request.GET.get("download")

                if download:

                    content = "attachment; filename='%s'" %(filename)

                response['Content-Disposition'] = content

                return response

        return HttpResponse("Not found")


I also tried with cid - <img src="cid:{{ package_no_barcode }}" alt="{{ package.package_no }}">



Example of svg generated



CODE128 = barcode.get_barcode_class('code128')

package_no_barcode = CODE128(u'PLAI73664PJHS')

package_no_barcode.save('PSKK')


generate svg - 






<svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>





Update - using .render, - 'package_no_barcode':package_no_barcode.render, i can get the svg code but not for html - 



b'<?xml version="1.0" encoding="UTF-8"?>rn<!DOCTYPE svgrn PUBLIC '-//W3C//DTD SVG 1.1//EN'rn

'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>rn<svg height="23.000mm" version="1.1" width="38.000mm" xmlns="http://www.w3.org/2000/svg">rn

<!--Autogenerated with python-barcode 0.9.0-->rn <g id="barcode_group">rn <rect height="100%" style="fill:white" width="100%"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="2.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="4.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.140mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.600mm" x="5.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="5.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="6.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="6.940mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.200mm" x="8.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.340mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="8.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="8.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="9.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="10.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="10.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="10.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="11.140mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.600mm" x="11.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="11.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.600mm" x="12.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="12.940mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.200mm" x="13.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="13.740mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="14.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="14.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="14.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="15.740mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="16.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.200mm" x="16.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="16.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="17.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm"

x="17.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="17.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="18.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.740mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="19.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="20.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm"

x="20.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="21.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="21.540mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="21.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="22.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="22.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.200mm" x="23.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="23.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="23.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="24.540mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="24.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="25.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="26.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="26.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="28.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="28.540mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.600mm" x="28.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="29.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.740mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="29.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="30.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="30.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="31.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="31.540mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.200mm" x="32.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm"

x="32.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="33.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="33.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="34.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.200mm" x="35.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="35.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>rn <text

style="fill:black;font-size:10pt;text-anchor:middle;" x="19.240mm" y="21.000mm">UXXWL94HXO08</text>rn </g>rn</svg>rn'


How to make svg image with this code ?






python django python-3.x django-templates







share|improve this question
















I am using django and trying to render invoice pdf, pdf is generating successfully but images are not in pdf.



Actually I want to add barcode image, so I dynamically generated a .svg file, but don't know how to put it into pdf.



Here is what I am doing ..



from io import BytesIO

from django.http import HttpResponse

from django.template.loader import get_template



from xhtml2pdf import pisa



def render_to_pdf(template_src, context_dict={}):

    template = get_template(template_src)

    html  = template.render(context_dict)

    result = BytesIO()

    pdf = pisa.pisaDocument(BytesIO(html.encode("ISO-8859-1")), result)

    if not pdf.err:

        return HttpResponse(result.getvalue(), content_type='application/pdf')

    return None


html - 



  <body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

              <span>

                {{ package_no_barcode }}

                <br>

                {{ package.package_no }}

                ....


view - 



class GenerateInvoicePdf(View):

    def get(self, request, *args, **kwargs):

        package = Package.objects.get(package_no=request.GET.get('package'))

        address = package.purchase.order_product.delivery_location

        CODE128 = barcode.get_barcode_class('code128')

        package_no_barcode = CODE128(u'{pkg_no}'.format(pkg_no=package.package_no))

        if request.user.display_username == seller.display_username:

            data = {

                 'package':package,

                 'address':address,

                 'package_no_barcode':package_no_barcode,

             }

            pdf = render_to_pdf('pdf/invoice.html', data)

            if pdf:

                response = HttpResponse(pdf, content_type='application/pdf')

                filename = "Invoice_%s.pdf" %(package)

                content = "inline; filename='%s'" %(filename)

                download = request.GET.get("download")

                if download:

                    content = "attachment; filename='%s'" %(filename)

                response['Content-Disposition'] = content

                return response

        return HttpResponse("Not found")


I also tried with cid - <img src="cid:{{ package_no_barcode }}" alt="{{ package.package_no }}">



Example of svg generated



CODE128 = barcode.get_barcode_class('code128')

package_no_barcode = CODE128(u'PLAI73664PJHS')

package_no_barcode.save('PSKK')


generate svg - 






<svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>





Update - using .render, - 'package_no_barcode':package_no_barcode.render, i can get the svg code but not for html - 



b'<?xml version="1.0" encoding="UTF-8"?>rn<!DOCTYPE svgrn PUBLIC '-//W3C//DTD SVG 1.1//EN'rn

'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>rn<svg height="23.000mm" version="1.1" width="38.000mm" xmlns="http://www.w3.org/2000/svg">rn

<!--Autogenerated with python-barcode 0.9.0-->rn <g id="barcode_group">rn <rect height="100%" style="fill:white" width="100%"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="2.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="4.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.140mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.600mm" x="5.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="5.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="6.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="6.940mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.200mm" x="8.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.340mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="8.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="8.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="9.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="10.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="10.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="10.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="11.140mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.600mm" x="11.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="11.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.600mm" x="12.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="12.940mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.200mm" x="13.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="13.740mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="14.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="14.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="14.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="15.740mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="16.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.200mm" x="16.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="16.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="17.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm"

x="17.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="17.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="18.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.740mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="19.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="20.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm"

x="20.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="21.140mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="21.540mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="21.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="22.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="22.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.200mm" x="23.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="23.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="23.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="24.540mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="24.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="25.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="26.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="26.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="28.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="28.540mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.600mm" x="28.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="29.540mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.740mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.400mm" x="29.940mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="30.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.400mm" x="30.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.400mm" x="31.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="31.540mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.200mm" x="32.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm"

x="32.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.940mm" y="1.000mm"/>rn <rect height="15.000mm"

style="fill:white;" width="0.200mm" x="33.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm"

y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.600mm" x="33.740mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;"

width="0.600mm" x="34.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.940mm" y="1.000mm"/>rn <rect

height="15.000mm" style="fill:black;" width="0.200mm" x="35.140mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:white;" width="0.200mm"

x="35.340mm" y="1.000mm"/>rn <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>rn <text

style="fill:black;font-size:10pt;text-anchor:middle;" x="19.240mm" y="21.000mm">UXXWL94HXO08</text>rn </g>rn</svg>rn'


How to make svg image with this code ?






<svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>





<svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>





python django python-3.x django-templates




python django python-3.x django-templates






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 18 at 20:49







Pankaj Sharma

















asked Jan 18 at 20:20









Pankaj SharmaPankaj Sharma

445210




445210













  • Have you tried to put the svg code directly into the template using the <svg> tag and not the <img> tag? more. Could you add an example of the svg you are generating?

    – pazitos10
    Jan 18 at 20:25













  • Make sure your var package_no_barcode is an absolute url, not relative.

    – trinchet
    Jan 18 at 20:28











  • actually when I put it into <svg> tags I am getting the text of barcode

    – Pankaj Sharma
    Jan 18 at 20:28











  • @trinchet I don't want to save these svg files

    – Pankaj Sharma
    Jan 18 at 20:29













  • @pazitos10 I have added the example of generated svg

    – Pankaj Sharma
    Jan 18 at 20:37



















  • Have you tried to put the svg code directly into the template using the <svg> tag and not the <img> tag? more. Could you add an example of the svg you are generating?

    – pazitos10
    Jan 18 at 20:25













  • Make sure your var package_no_barcode is an absolute url, not relative.

    – trinchet
    Jan 18 at 20:28











  • actually when I put it into <svg> tags I am getting the text of barcode

    – Pankaj Sharma
    Jan 18 at 20:28











  • @trinchet I don't want to save these svg files

    – Pankaj Sharma
    Jan 18 at 20:29













  • @pazitos10 I have added the example of generated svg

    – Pankaj Sharma
    Jan 18 at 20:37

















Have you tried to put the svg code directly into the template using the <svg> tag and not the <img> tag? more. Could you add an example of the svg you are generating?

– pazitos10
Jan 18 at 20:25







Have you tried to put the svg code directly into the template using the <svg> tag and not the <img> tag? more. Could you add an example of the svg you are generating?

– pazitos10
Jan 18 at 20:25















Make sure your var package_no_barcode is an absolute url, not relative.

– trinchet
Jan 18 at 20:28





Make sure your var package_no_barcode is an absolute url, not relative.

– trinchet
Jan 18 at 20:28













actually when I put it into <svg> tags I am getting the text of barcode

– Pankaj Sharma
Jan 18 at 20:28





actually when I put it into <svg> tags I am getting the text of barcode

– Pankaj Sharma
Jan 18 at 20:28













@trinchet I don't want to save these svg files

– Pankaj Sharma
Jan 18 at 20:29







@trinchet I don't want to save these svg files

– Pankaj Sharma
Jan 18 at 20:29















@pazitos10 I have added the example of generated svg

– Pankaj Sharma
Jan 18 at 20:37





@pazitos10 I have added the example of generated svg

– Pankaj Sharma
Jan 18 at 20:37












1 Answer
1






active

oldest

votes


















1














To get the svg rendered in the html, you have to get the svg text as it is (text output) and put it in your template without using the <img> tag. 






<body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

            <svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>

            <span></span>

            </div>

          </div>

        </div>

      </div>

    </div>

 </body>





In the snippet you see the html already rendered but you need to find the way of getting that text and pass it to the template as a context variable, like you are doing with package_no_barcode.



EDIT



I've made a test using jinja2 and using flask but the solution should be similar with django and its template engine.



First, make sure you get the svg code as a string in your server code. Then, pass it to the template as a context variable as I mentioned before.



In the template, you need to "evaluate" the html or in this case svg code that comes in the variable you passed before. To do that using jinja2, I used the safe filter.



<body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

            {{ barcode | safe }}

            <span></span>

            </div>

          </div>

        </div>

      </div>

    </div>

 </body>


And as a result I got:



enter image description here



But using django's default template engine I think you need to use the escape builtin filter to get something similar.



Similar question but using flask and jinja2: Passing HTML to template using Flask/Jinja2






share|improve this answer


























  • please see the update, i am not getting the exact svg code for html

    – Pankaj Sharma
    Jan 18 at 20:52











  • @PankajSharma, I edited my answer adding an example.

    – pazitos10
    Jan 18 at 22:22











  • Thank you for answering, its working for html but in my pdf I can only see the code...I am uploading the pdf...please see that - datafilehost.com/d/c995c651

    – Pankaj Sharma
    Jan 19 at 5:24











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54260907%2fhtml-template-to-pdf-with-images%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














To get the svg rendered in the html, you have to get the svg text as it is (text output) and put it in your template without using the <img> tag. 






<body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

            <svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>

            <span></span>

            </div>

          </div>

        </div>

      </div>

    </div>

 </body>





In the snippet you see the html already rendered but you need to find the way of getting that text and pass it to the template as a context variable, like you are doing with package_no_barcode.



EDIT



I've made a test using jinja2 and using flask but the solution should be similar with django and its template engine.



First, make sure you get the svg code as a string in your server code. Then, pass it to the template as a context variable as I mentioned before.



In the template, you need to "evaluate" the html or in this case svg code that comes in the variable you passed before. To do that using jinja2, I used the safe filter.



<body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

            {{ barcode | safe }}

            <span></span>

            </div>

          </div>

        </div>

      </div>

    </div>

 </body>


And as a result I got:



enter image description here



But using django's default template engine I think you need to use the escape builtin filter to get something similar.



Similar question but using flask and jinja2: Passing HTML to template using Flask/Jinja2






share|improve this answer


























  • please see the update, i am not getting the exact svg code for html

    – Pankaj Sharma
    Jan 18 at 20:52











  • @PankajSharma, I edited my answer adding an example.

    – pazitos10
    Jan 18 at 22:22











  • Thank you for answering, its working for html but in my pdf I can only see the code...I am uploading the pdf...please see that - datafilehost.com/d/c995c651

    – Pankaj Sharma
    Jan 19 at 5:24
















1














To get the svg rendered in the html, you have to get the svg text as it is (text output) and put it in your template without using the <img> tag. 






<body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

            <svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>

            <span></span>

            </div>

          </div>

        </div>

      </div>

    </div>

 </body>





In the snippet you see the html already rendered but you need to find the way of getting that text and pass it to the template as a context variable, like you are doing with package_no_barcode.



EDIT



I've made a test using jinja2 and using flask but the solution should be similar with django and its template engine.



First, make sure you get the svg code as a string in your server code. Then, pass it to the template as a context variable as I mentioned before.



In the template, you need to "evaluate" the html or in this case svg code that comes in the variable you passed before. To do that using jinja2, I used the safe filter.



<body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

            {{ barcode | safe }}

            <span></span>

            </div>

          </div>

        </div>

      </div>

    </div>

 </body>


And as a result I got:



enter image description here



But using django's default template engine I think you need to use the escape builtin filter to get something similar.



Similar question but using flask and jinja2: Passing HTML to template using Flask/Jinja2






share|improve this answer


























  • please see the update, i am not getting the exact svg code for html

    – Pankaj Sharma
    Jan 18 at 20:52











  • @PankajSharma, I edited my answer adding an example.

    – pazitos10
    Jan 18 at 22:22











  • Thank you for answering, its working for html but in my pdf I can only see the code...I am uploading the pdf...please see that - datafilehost.com/d/c995c651

    – Pankaj Sharma
    Jan 19 at 5:24














1












1








1







To get the svg rendered in the html, you have to get the svg text as it is (text output) and put it in your template without using the <img> tag. 






<body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

            <svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>

            <span></span>

            </div>

          </div>

        </div>

      </div>

    </div>

 </body>





In the snippet you see the html already rendered but you need to find the way of getting that text and pass it to the template as a context variable, like you are doing with package_no_barcode.



EDIT



I've made a test using jinja2 and using flask but the solution should be similar with django and its template engine.



First, make sure you get the svg code as a string in your server code. Then, pass it to the template as a context variable as I mentioned before.



In the template, you need to "evaluate" the html or in this case svg code that comes in the variable you passed before. To do that using jinja2, I used the safe filter.



<body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

            {{ barcode | safe }}

            <span></span>

            </div>

          </div>

        </div>

      </div>

    </div>

 </body>


And as a result I got:



enter image description here



But using django's default template engine I think you need to use the escape builtin filter to get something similar.



Similar question but using flask and jinja2: Passing HTML to template using Flask/Jinja2






share|improve this answer















To get the svg rendered in the html, you have to get the svg text as it is (text output) and put it in your template without using the <img> tag. 






<body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

            <svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>

            <span></span>

            </div>

          </div>

        </div>

      </div>

    </div>

 </body>





In the snippet you see the html already rendered but you need to find the way of getting that text and pass it to the template as a context variable, like you are doing with package_no_barcode.



EDIT



I've made a test using jinja2 and using flask but the solution should be similar with django and its template engine.



First, make sure you get the svg code as a string in your server code. Then, pass it to the template as a context variable as I mentioned before.



In the template, you need to "evaluate" the html or in this case svg code that comes in the variable you passed before. To do that using jinja2, I used the safe filter.



<body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

            {{ barcode | safe }}

            <span></span>

            </div>

          </div>

        </div>

      </div>

    </div>

 </body>


And as a result I got:



enter image description here



But using django's default template engine I think you need to use the escape builtin filter to get something similar.



Similar question but using flask and jinja2: Passing HTML to template using Flask/Jinja2






<body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

            <svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>

            <span></span>

            </div>

          </div>

        </div>

      </div>

    </div>

 </body>





<body>

    <div class="container-fluid">

      <div class="row">

        <div class="col-6">

          <div class="row">

            <div class="col-12">

            <svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">

    <!--Autogenerated with python-barcode 0.9.0-->

    <g id="barcode_group">

        <rect height="100%" style="fill:white" width="100%"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>

        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>

        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>

    </g>

</svg>

            <span></span>

            </div>

          </div>

        </div>

      </div>

    </div>

 </body>






share|improve this answer














share|improve this answer



share|improve this answer








edited Jan 18 at 23:41

























answered Jan 18 at 20:49









pazitos10pazitos10

697623




697623













  • please see the update, i am not getting the exact svg code for html

    – Pankaj Sharma
    Jan 18 at 20:52











  • @PankajSharma, I edited my answer adding an example.

    – pazitos10
    Jan 18 at 22:22











  • Thank you for answering, its working for html but in my pdf I can only see the code...I am uploading the pdf...please see that - datafilehost.com/d/c995c651

    – Pankaj Sharma
    Jan 19 at 5:24



















  • please see the update, i am not getting the exact svg code for html

    – Pankaj Sharma
    Jan 18 at 20:52











  • @PankajSharma, I edited my answer adding an example.

    – pazitos10
    Jan 18 at 22:22











  • Thank you for answering, its working for html but in my pdf I can only see the code...I am uploading the pdf...please see that - datafilehost.com/d/c995c651

    – Pankaj Sharma
    Jan 19 at 5:24

















please see the update, i am not getting the exact svg code for html

– Pankaj Sharma
Jan 18 at 20:52





please see the update, i am not getting the exact svg code for html

– Pankaj Sharma
Jan 18 at 20:52













@PankajSharma, I edited my answer adding an example.

– pazitos10
Jan 18 at 22:22





@PankajSharma, I edited my answer adding an example.

– pazitos10
Jan 18 at 22:22













Thank you for answering, its working for html but in my pdf I can only see the code...I am uploading the pdf...please see that - datafilehost.com/d/c995c651

– Pankaj Sharma
Jan 19 at 5:24





Thank you for answering, its working for html but in my pdf I can only see the code...I am uploading the pdf...please see that - datafilehost.com/d/c995c651

– Pankaj Sharma
Jan 19 at 5:24


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54260907%2fhtml-template-to-pdf-with-images%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Liquibase includeAll doesn't find base path

Image
0 while migrating a project from maven to gradle I ran in the following problem. My file structure looks like this: The changelog-master.xml includes the changelog-v1-0.xml, which then should include the directory v1-0 with following line: <includeAll path="src/main/resources/liquibase/changelogs/v1-0/" errorIfMissingOrEmpty="true" /> . This works just fine. This: <includeAll path="/liquibase/changelogs/v1-0/" errorIfMissingOrEmpty="true" relativeToChangelogFile="true" /> doesn't. I get following errormessage: Cannot find base path 'src/main/resources/liquibase/changelogs/changelog-v1-0.xml' with liquibase in version 3.6.2. I also tried the versions 3.6.0, 3.6.1 and 3.5.5. I am using gradle to build my project in version 4.9
Read more

How to use setInterval in EJS file?

Image
0 I have a problem with using setInterval in my EJS file, which is part of my nodejs app (with Express). I have created function getRandomSubarray , which chooses randomly subset of images from array. I want to change this subset every three seconds. This is problematic piece of my code: <%setInterval(function(){%> <%RandomSubrecipesImg=tools.getRandomSubarray(recipesImg,4)%> <div class="navbar-image-box col-sm-3 d-none d-sm-block"><img class="navbar-image" src="<%=RandomSubrecipesImg[0].replace('public',"")%>"></div> <div class="navbar-image-box col-sm-3 d-none d-sm-block"><img class="navbar-image" src="<%=RandomSubrecipesImg[1].replace('public',"")%>">&
Read more

Petrus Granier-Deferre

Image
Petrus Granier-Deferre (Lutetiae die 27 Iulii 1927 natus; ibidem die 16 Novembris 2007 mortuus) fuit moderator cinematographicus et dux scaenarum Francicus. Pelliculae selectae | 1961 : Le Petit Garçon de l'ascenseur 1962 : Les Aventures de Salavin (sous-titré Confession de minuit) 1965 : La Métamorphose des cloportes 1965 : Paris au mois d'août 1967 : Le Grand Dadais 1970 : La Horse 1971 : Le Chat 1971 : La Veuve Couderc 1973 : Le Fils 1973 : Le Train 1974 : La Race des seigneurs 1975 : La Cage 1975 : Adieu poulet 1976 : Une femme à sa fenêtre 1976 : Le Toubib 1981 : Une étrange affaire 1982 : L'Étoile du Nord 1983 : L'Ami de Vincent 1985 : L'Homme aux yeux d'argent 1986 : Cours privé 1987 : Noyade interdite 1988 : La Couleur du vent 1990 : L'Autrichienne 1995 : Le Petit Garçon 1992 : La Voix 1993 : Archipel 1995 : Maigret et la vente à la bougie (TV) 1996 : La Dernière Fête (TV) 1997 : Maigret et l'enfant de c
Read more