# Rendering Modes

The Barcodes support two modes for rendering—Canvas (bitmap) and SVG (vector graphics).

By default, the Barcode and QR Code components use SVG rendering. You can select a rendering mode by setting the [`BarcodeProps.renderAs`](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/barcodeprops#renderas) and [`QRCodeProps.renderAs`](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/qrcodeprops#renderas) props.

[Demo Source](https://demos.telerik.com/kendo-react-ui/barcodes/rendering-modes/func/source.txt)

## When to Use SVG

The default SVG rendering mode is recommended for general use.

Using vector graphics ensures that:

* The browser zoom does not degrade the image.
* The prints are crisp regardless of the resolution.

## When to Use Canvas

When performance is critical, for example, when rendering large pages, it is recommended to use the Canvas rendering mode.

The browser does not have to maintain a live SVG DOM tree for the Barcode and QR Code components, which results in:

* Quicker screen updates.
* Lower memory usage.

On the downside, rendering to a fixed resolution bitmap results in:

* Blurry images on zoom.
* Poor print quality.

## Suggested Links

* [API Reference of the `Barcode`](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/barcode)
* [API Reference of the `QRCode`](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/qrcode)