title: Generate a barcode inside SVG Angular 5
body: <p>As the title states I am attempting to put a barcode within a SVG but am having trouble doing so using Angular 5.</p>
  
  <p>I am using <a href="https://www.npmjs.com/package/ngx-barcode" rel="nofollow noreferrer">NGX-Barcode</a> to generate the barcodes and have created a SVG to put the barcode within. However I cannot figure out how to put the barcode in the SVG. Any ideas/suggestions are very welcome as I am all out of ideas.</p>
  
  <p>NGX-Barcode Generates a barcode like so:</p>
  
  <pre><code>&lt;ngx-barcode _ngcontent-c18="" bc-element-type="svg" bc-height="30" bc-width="1" class="rotate" ng-reflect-element-type="svg" ng-reflect-width="1" ng-reflect-height="30" ng-reflect-value="KB1"&gt;
    &lt;div class="barcode"&gt;
      &lt;svg width="88px" height="50px" x="0px" y="0px" viewBox="0 0 88 50" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"&gt;
        &lt;rect x="0" y="0" width="88" height="50" style="fill:#ffffff;"&gt;&lt;/rect&gt;
        &lt;g transform="translate(10, 10)" style="fill:#000000;"&gt;
          &lt;rect x="0" y="0" width="2" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="3" y="0" width="1" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="6" y="0" width="1" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="11" y="0" width="1" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="13" y="0" width="2" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="18" y="0" width="3" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="22" y="0" width="1" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="26" y="0" width="1" height="30"&gt;&lt;/rect&gt; 
          &lt;rect x="28" y="0" width="2" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="33" y="0" width="1" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="36" y="0" width="3" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="41" y="0" width="2" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="44" y="0" width="3" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="48" y="0" width="4" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="53" y="0" width="1" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="55" y="0" width="2" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="60" y="0" width="3" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="64" y="0" width="1" height="30"&gt;&lt;/rect&gt;
          &lt;rect x="66" y="0" width="2" height="30"&gt;&lt;/rect&gt;
        &lt;/g&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/ngx-barcode&gt;
  </code></pre>
  
  <p>And generate my SVG like so (Barcode to go in place of blue rectangle):</p>
  
  <pre><code>&lt;svg viewBox="0 0 675 315"&gt;
    &lt;line x1="0" y1="0" x2="595" y2="0" style="stroke:rgb(0,0,0);stroke-width:2"&gt;&lt;/line&gt;
    &lt;line x1="595" y1="0" x2="675" y2="84" style="stroke:rgb(0,0,0);stroke-width:2"&gt;&lt;/line&gt;
    &lt;line x1="675" y1="84" x2="675" y2="300" style="stroke:rgb(0,0,0);stroke-width:2"&gt;&lt;/line&gt;
    &lt;line x1="675" y1="300" x2="0" y2="300" style="stroke:rgb(0,0,0);stroke-width:2"&gt;&lt;/line&gt;
    &lt;line x1="0" y1="0" x2="0" y2="300" style="stroke:rgb(0,0,0);stroke-width:2"&gt;&lt;/line&gt;
    &lt;!--Labels--&gt;
    &lt;text x="180" y="40" style="fill:black; font-size: 24pt; font-weight:bold;"&gt;Consumables Kanban&lt;/text&gt;
    &lt;text x="60" y="84" style="fill:black; font-size: 12pt;"&gt;Part #&lt;/text&gt;
    &lt;text x="60" y="126" style="fill:black; font-size: 12pt;"&gt;Supplier Item #&lt;/text&gt;
    &lt;text x="60" y="168" style="fill:black; font-size: 12pt;"&gt;Description&lt;/text&gt;
    &lt;text x="60" y="210" style="fill:black; font-size: 12pt;"&gt;Supplier&lt;/text&gt;
    &lt;text x="60" y="273" style="fill:black; font-size: 12pt;"&gt;Shelf Location&lt;/text&gt;
    &lt;text x="435" y="273" style="fill:black; font-size: 12pt;"&gt;Bin Quantity&lt;/text&gt;
    &lt;!--Details--&gt;
    &lt;rect x="5" y="5" width="50" height="290" fill="blue"&gt;&lt;/rect&gt;
    &lt;text x="241" y="84" style="fill:black; font-size: 12pt; font-weight:bold;"&gt;{{itemData.Item_ID}}&lt;/text&gt;
    &lt;text x="241" y="126" style="fill:black; font-size: 12pt; font-weight:bold;"&gt;{{itemData.Supplier_Item_Code}}&lt;/text&gt;
    &lt;text x="241" y="168" style="fill:black; font-size: 12pt; font-weight:bold;"&gt;{{itemData.Description}}&lt;/text&gt;
    &lt;text x="241" y="210" style="fill:black; font-size: 12pt; font-weight:bold;"&gt;{{itemData.Supplier_Name}}&lt;/text&gt;
    &lt;text x="200" y="273" style="fill:black; font-size: 12pt; font-weight:bold;"&gt;{{itemData.Location_String}}&lt;/text&gt;
    &lt;text x="595" y="273" style="fill:black; font-size: 12pt; font-weight:bold;"&gt;{{itemData.Bin_Count}}&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-11zh7z" rel="nofollow noreferrer">StackBlitz example</a> </p>
  
  <p>Thanks.</p>