Is it possible to get SVG to work well with react-top-print?

Asked
Active3 hr before
Viewed126 times

10 Answers

printpossiblereact
90%

Problem starts with implementing printing functionality inside my pdf viewer. I am rendering pdf with react-pdf library as SVG.,Rendering pdf as canvas instead of SVG solves the problem, and pdf prints out as intended.,Making statements based on opinion; back them up with references or personal experience.

 Pretag team - issue, fix, solve, resolve
88%

You can directly use .svg extension with img tag if the image is remotely hosted.

ReactDOM.render(
  <img src={"http://s.cdpn.io/3/kiwi.svg"}/>,
  document.getElementById('root')
);
load more v
72%

In order to be able to use SVGs or any other image format in the img <img src={} /> we have to set up a file loader system in whichever module bundler we are using(Webpack, Parcel, etc). Here I will show you how to set it up in a few steps if you are already using Webpack.,Now we can import our SVG images as a React component and use it in our code like this:,What are the disadvantages? Is it solely the amount of text in the code? Or is there another disadvantage?

And you can update your Webpack configuration file rules with this code:

const webpack = require('webpack');

module.exports = {
   entry: './src/index.js',
   module: {
      rules: [
         //...
         {
            test: /\.(png|jp(e*)g|svg|gif)$/,
            use: [{
               loader: 'file-loader',
               options: {
                  name: 'images/[hash]-[name].[ext]',
               },
            }, ],
         },
      ],
   },
   //...
};
load more v
65%

Thanks to Facebook, we have React to do the work for us.,We start by creating a simple Express app that handles incoming requests for SVG graphs (svg_server.js):,Just to test that the axis works, let’s stub a graph body implementation:

First, React works with the DOM (and the DOM is not only HTML). So, you can work with SVG exactly in the way you normally do with HTML. For example, here is a circle:

import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <svg>
        <circle cx={50} cy={50} r={10} fill="red" />
      </svg>
    )
  }
}
load more v
75%

react-to-print should be compatible with most major browsers. We also do our best to support IE11.,Firefox Android (does not support window.print),npm install --save react-to-print

export class ComponentToPrint extends React.PureComponent {
  render() {
    return (
      <table>
        <thead>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </thead>
        <tbody>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
        </tbody>
      </table>
    );
  }
}
load more v
40%

In this article, we'll give a brief overview of SVG, when to use it (and when not to), and how to use it effectively in a React application. We'll also briefly touch on how to integrate with d3 (which comes in very useful when working with SVG).,Let's assume we're working with a certain explicit width and height for our component. This can get tricky if you need your component to be responsive, but we'll hand-wave around it for now; we discuss that in more detail below.,other odds and ends, like the familiar anchor (a) from HTML (with the neat feature that it can conform to whatever shape it is wrapping, and only that part is interactive).

const handleClick = (e: React.MouseEvent<Element>): void => {
  console.log('clicked', e.currentTarget)
}
load more v
22%

🚀 Convert your SVG to an Expo component in the browser using React SVGR.,🧚‍♀️ Optimize your SVG with SVGOMG. This will make the code smaller and easier to work with. Be sure not to remove the viewbox for best results on Android.,🖌 Create or modify your own SVGs for free using Figma.

.css - 1 kjja91 {
   border: 1 px solid
   var (--expo - theme - border -
      default);padding: 16 px;margin: 16 px 0;white - space: pre;overflow: auto; - webkit - overflow - scrolling: touch;background - color: var (--expo - theme - background - secondary);line - height: 120 % ;border - radius: 4 px;
}.css - vem1e6 {
   color: var (--expo - theme - text -
      default);font - family: expo - brand - mono,
   Monaco,
   Consolas,
   'Liberation Mono',
   'Courier New',
   monospace,
   'Apple Color Emoji',
   'Segoe UI Emoji',
   'Segoe UI Symbol',
   'Noto Color Emoji';font - size: 13 px;line - height: 20 px;white - space: inherit;padding: 0 px;margin: 0 px;
}.css - vem1e6.code - annotation {
   -webkit - transition: 200 ms ease all;
   transition: 200 ms ease all;
   transition - property: text - shadow, opacity;
   text - shadow: var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px,
      var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px,
      var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px,
      var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px;
}.css - vem1e6.code - annotation: hover {
   cursor: pointer; - webkit - animation: none;animation: none;opacity: 0.8;
}.css - vem1e6.code - hidden {
   display: none;
}.css - vem1e6.code - placeholder {
   opacity: 0.5;
}
import * as Svg from 'react-native-svg';
.css - vem1e6 {
   color: var (--expo - theme - text -
      default);font - family: expo - brand - mono,
   Monaco,
   Consolas,
   'Liberation Mono',
   'Courier New',
   monospace,
   'Apple Color Emoji',
   'Segoe UI Emoji',
   'Segoe UI Symbol',
   'Noto Color Emoji';font - size: 13 px;line - height: 20 px;white - space: inherit;padding: 0 px;margin: 0 px;
}.css - vem1e6.code - annotation {
   -webkit - transition: 200 ms ease all;
   transition: 200 ms ease all;
   transition - property: text - shadow, opacity;
   text - shadow: var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px,
      var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px,
      var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px,
      var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px;
}.css - vem1e6.code - annotation: hover {
   cursor: pointer; - webkit - animation: none;animation: none;opacity: 0.8;
}.css - vem1e6.code - hidden {
   display: none;
}.css - vem1e6.code - placeholder {
   opacity: 0.5;
}
import * as Svg from 'react-native-svg';
import * as React from 'react';
import Svg, { Circle, Rect } from 'react-native-svg';

export default function SvgComponent(props) {
  return (
    <Svg height="50%" width="50%" viewBox="0 0 100 100" {...props}>
      <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
      <Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow" />
    </Svg>
  );
}
import * as React from 'react';
import Svg, { Circle, Rect } from 'react-native-svg';

export default function SvgComponent(props) {
  return (
    <Svg height="50%" width="50%" viewBox="0 0 100 100" {...props}>
      <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
      <Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow" />
    </Svg>
  );
}
load more v
60%

Once you are done tweaking the site and you want to generate the production static site, you will call,You can redeclare the variable many times, overriding it:,they provide an easy way to interpolate variables and expressions in strings

The simplest one is to add the React JavaScript file into the page directly. This is best when your React app will interact with the elements present on a single page, and not actually controls the whole navigation aspect.

/n

In this case, you add 2 script tags to the end of the body tag:

body
load more v
48%

A React component that injects SVG into the DOM., fallback - Optional Fallback to use if an injection error occurs. Can be a string, class component, or function component. Defaults to null., beforeInjection(svg) - Optional Function to call just before the SVG is injected. svg is the SVG DOM element which is about to be injected. Defaults to () => {}.

import React from 'react'
import { render } from 'react-dom'
import { ReactSVG } from 'react-svg'

render(<ReactSVG src="svg.svg" />, document.getElementById('root'))
load more v
23%

An SVG image can be added as a code island directly within your HTML page using outer <svg> tags:,The original image can still be styled using CSS, although it’s not possible to apply additional styles to the <use> itself.,The HTML <object> tag can be used to add an SVG to your page:

An SVG image can be added as a code island directly within your HTML page using outer <svg> tags:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8" />
   <title>Embedded SVG</title>
</head>

<body>

   <h1>Embedded SVG</h1>

   <!-- SVG code -->
   <svg width="300px" height="300px" xmlns="https://www.w3.org/2000/svg">
      <text x="10" y="50" font-size="30">My SVG</text>
   </svg>

</body>

</html>
load more v