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

Homophylophilia

Image
Haec pagina ad tempus protecta est ob maleficia perpetua. Quaesemus, emendationes suggere in pagina disputationis vel magistratum ad hanc deprotegendam pete. Homophylophilia Hyacinthus complexus ab amante suo Apolline, in pictura Mors Hyacinthi quam Jean Broc pinxit. Homophylophilia est sui sexus vel generis amor vel mores romantici vel sexuales, res venerea masculina in masculos, aut mulier in mulieres appetentes. Hoc ingenium sexuale est "exemplar permanens vel inclinatio ad experiendam sexualem, adfectionalem, vel romanticam vim attrahendi," praecipue vel solum ex hominibus eiusdem sexús; notio "etiam ad hominis iudicium identitatis privatae socialisque in illis attractionibus conditum refert, in moribus quoque qui illos exprimant, et in societate communitatis aliorum qui illos communicent." [1] [2] Per aevos alii aliter rem definiverunt, sed Occidentali nostrae aetatis cultu civili non tantum ad ipsa acta erotica spectat, sed etiam igitur
Read more

Updating UILabel text programmatically using a function

Image
0 so I am trying to update the UIlabel text using a func. I have seen few other questions like mine and I tried their method but it doesn't work. fun returns no value when used in the UIlabel. I have shown my code below.It has to be noted that when I use the function in viewdidload I can retrieve the data. lazy var name: UILabel = { let lb = UILabel() lb.text? = getthename() lb.lineBreakMode = NSLineBreakMode.byWordWrapping lb.textColor = .mainGreen lb.textAlignment = .left lb.font = UIFont.boldSystemFont(ofSize:12.0) return lb }() func getthename() -> String { var wins : String = "" let ud = (Auth.auth().currentUser?.uid) self.ref = Database.database().reference() self.ref.child("Users").child(ud!).observeSingleEvent(of: .value, with: {(snapshot) in
Read more

Cloud Functions - OpenCV Videocapture Read method fails for larger files from cloud storage

Image
0 I created a cloud function to read a video file from cloud storage and read frames and create an image for each frame. This function works for small files which is 1-2 MB, However, this method fails while reading larger file 130 MB. import cv2 from google.cloud import storage vidcap = cv2.VideoCapture("https://storage.googleapis.com/[bucker_name]/[filename.mp4]") if vidcap.isOpened(): vidcap.open("https://storage.googleapis.com/[bucker_name]/[filename.mp4]") success,image = vidcap.read() print(success) Expected the print will return true and an image will hold an image of a first frame. python-3.x function opencv cloud share | improve this question
Read more