Reactjs - How to resize an SVG in React and keep it compatible with a FramerMotion div?

iangross7
August 29, 2023
382 views
0 votes
2 Answers

I’m new to React and the title summarizes my problem. I’ll attach my code below.

import { motion } from 'framer-motion';
import { ReactComponent as TestCard } from '../assets/deckofcards/10c.svg'

import './Card.css'

export default function Card() {
    return (
        <div className='card-wrapper'>
          <motion.div drag dragSnapToOrigin="true">
            <TestCard />
          </motion.div>
        </div>
      );
}

I’m attempting to resize the TestCard component. Using style={{transform: ‘scale(0.5’)}} does indeed change the size of the card but then the hitbox of the drag extends well beyond the card itself. Using simpler fixes like width and height and viewbox seems to crop out parts of the svg, leaving only a portion of the card. I got my SVG of the internet, and I’m using it locally, so I’ll attach it to this post as well. I’d rather not change the file directly as I have 52 other SVGs for a deck of cards.

<svg xmlns="http://www.w3.org/2000/svg" width="234" height="333"><g transform="translate(0 -719.362)"><rect width="233.244" height="332.244" x=".378" y="719.74" fill="#fff" stroke="gray" stroke-width=".756" rx="8.919" ry="8.946"/><g stroke-width="3.181"><path d="M56.218 864.067h4.816v16.758h-4.816z"/><path d="M85.091 856.053c3.793 6.846 1.334 15.48-5.492 19.283-6.826 3.804-15.433 1.337-19.226-5.509a14.177 14.177 0 0 1-1.744-5.926c-.528 7.816-7.273 13.72-15.064 13.188-7.79-.531-13.676-7.297-13.146-15.11.53-7.814 7.275-13.718 15.065-13.187 2.045.14 4.036.724 5.86 1.713-6.677-4.017-8.862-12.725-4.855-19.447 4.006-6.722 12.687-8.914 19.39-4.895 6.702 4.019 8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.904 4.924c6.837-3.795 15.444-1.329 19.236 5.518z"/></g><g aria-label="1" font-family="Levenim MT" font-size="3.772" font-weight="700" letter-spacing="0" style="line-height:0%;-inkscape-font-specification:&quot;Sans Bold&quot;" word-spacing="0"><path d="M23.835 544.63q0 .354-.127.623-.34.113-.735.113h-10.44q-.934 0-.934-.99 0-.17.029-.538.028-.382.028-.58 0-.933.82-.933H16v-13.071h-4.3q-.906 0-.906-.99 0-.212.043-.68.056-.48.056-.72 0-.482.905-.482.255 0 .962.057.708.042 1.104.042 2.263 0 2.744-1.57h2.702v17.414q.948 0 2.037-.057 1.103-.07 1.315-.07.82 0 1.019.438.155.382.155 1.994z" font-size="28.97" style="line-height:1.25" transform="scale(.72185 1.38533)"/></g><g aria-label="0" font-family="Levenim MT" font-size="3.772" font-weight="700" letter-spacing="0" style="line-height:0%;-inkscape-font-specification:&quot;Sans Bold&quot;" word-spacing="0"><path d="M38.073 518.577q0 9.67-6.685 9.67-6.78 0-6.78-9.724 0-10.089 6.915-10.089 6.55 0 6.55 10.143zm-3.512-.284q0-6.928-3.227-6.928-1.891 0-2.688 2.741-.5 1.73-.5 4.309 0 6.928 3.188 6.928 1.904 0 2.714-2.728.513-1.756.513-4.322z" font-size="27.659" style="line-height:1.25" transform="scale(.69919 1.43023)"/></g><g stroke-width="3.181"><path d="M16.402 775.116h1.605v5.586h-1.605z"/><path d="M26.026 772.445a4.735 4.735 0 0 1-1.83 6.428 4.705 4.705 0 0 1-6.41-1.837 4.726 4.726 0 0 1-.58-1.975 4.717 4.717 0 0 1-5.022 4.396 4.722 4.722 0 0 1-4.382-5.037 4.718 4.718 0 0 1 6.975-3.824 4.74 4.74 0 0 1-1.618-6.483 4.705 4.705 0 0 1 6.463-1.631 4.735 4.735 0 0 1 1.627 6.482 4.771 4.771 0 0 1-1.635 1.642 4.712 4.712 0 0 1 6.412 1.839z"/></g><g aria-label="1" font-family="Levenim MT" font-size="3.772" font-weight="700" letter-spacing="0" style="line-height:0%;-inkscape-font-specification:&quot;Sans Bold&quot;" word-spacing="0"><path d="M-300.333-734.284q0 .353-.127.622-.34.113-.736.113h-10.44q-.933 0-.933-.99 0-.17.029-.538.028-.381.028-.58 0-.933.82-.933h3.523v-13.07h-4.3q-.906 0-.906-.991 0-.212.042-.679.057-.48.057-.721 0-.481.905-.481.255 0 .962.056.707.043 1.104.043 2.263 0 2.744-1.57h2.702v17.413q.947 0 2.037-.057 1.103-.07 1.315-.07.82 0 1.019.438.155.382.155 1.995z" font-size="28.97" style="line-height:1.25" transform="scale(-.72185 -1.38533)"/></g><g aria-label="0" font-family="Levenim MT" font-size="3.772" font-weight="700" letter-spacing="0" style="line-height:0%;-inkscape-font-specification:&quot;Sans Bold&quot;" word-spacing="0"><path d="M-296.6-720.192q0 9.67-6.686 9.67-6.78 0-6.78-9.724 0-10.089 6.915-10.089 6.55 0 6.55 10.143zm-3.512-.284q0-6.928-3.228-6.928-1.89 0-2.688 2.741-.5 1.729-.5 4.309 0 6.928 3.188 6.928 1.904 0 2.715-2.728.513-1.756.513-4.322z" font-size="27.659" style="line-height:1.25" transform="scale(-.69919 -1.43023)"/></g><g stroke-width="3.181"><path d="M215.99 996.608h1.606v-5.586h-1.605z"/><path d="M225.615 999.28a4.735 4.735 0 0 0-1.83-6.428 4.705 4.705 0 0 0-6.41 1.836 4.726 4.726 0 0 0-.58 1.976 4.717 4.717 0 0 0-5.022-4.397 4.722 4.722 0 0 0-4.382 5.037 4.718 4.718 0 0 0 6.975 3.825 4.74 4.74 0 0 0-1.619 6.482 4.705 4.705 0 0 0 6.464 1.632 4.735 4.735 0 0 0 1.627-6.483 4.771 4.771 0 0 0-1.635-1.641 4.712 4.712 0 0 0 6.412-1.84z"/></g><g stroke-width="3.181"><path d="M56.218 974.405h4.816v-16.757h-4.816z"/><path d="M85.091 982.42c3.793-6.846 1.334-15.48-5.492-19.284-6.826-3.803-15.433-1.337-19.226 5.51a14.177 14.177 0 0 0-1.744 5.926c-.528-7.816-7.273-13.72-15.064-13.189-7.79.532-13.676 7.297-13.146 15.111.53 7.814 7.275 13.718 15.065 13.186a14.314 14.314 0 0 0 5.86-1.713c-6.677 4.018-8.862 12.725-4.855 19.447 4.006 6.723 12.687 8.914 19.39 4.896 6.702-4.019 8.887-12.726 4.88-19.449a14.314 14.314 0 0 0-4.904-4.924c6.837 3.796 15.444 1.33 19.236-5.517z"/></g><g stroke-width="3.181"><path d="M56.218 797.319h4.816v16.757h-4.816z"/><path d="M85.091 789.304c3.793 6.847 1.334 15.48-5.492 19.284-6.826 3.804-15.433 1.337-19.226-5.51a14.177 14.177 0 0 1-1.744-5.926c-.528 7.817-7.273 13.72-15.064 13.189-7.79-.532-13.676-7.297-13.146-15.11.53-7.815 7.275-13.718 15.065-13.187 2.045.14 4.036.723 5.86 1.713-6.677-4.017-8.862-12.725-4.855-19.447 4.006-6.723 12.687-8.914 19.39-4.895 6.702 4.018 8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.904 4.924c6.837-3.796 15.444-1.329 19.236 5.517z"/></g><g stroke-width="3.181"><path d="M114.588 830.693h4.816v16.757h-4.816z"/><path d="M143.462 822.678c3.792 6.847 1.333 15.48-5.493 19.284-6.826 3.804-15.433 1.337-19.225-5.51a14.177 14.177 0 0 1-1.745-5.926c-.528 7.817-7.273 13.72-15.063 13.189-7.79-.531-13.676-7.297-13.147-15.11.53-7.815 7.275-13.718 15.066-13.187 2.045.14 4.035.724 5.859 1.713-6.677-4.017-8.862-12.725-4.855-19.447 4.007-6.722 12.688-8.914 19.39-4.895 6.702 4.018 8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.903 4.924c6.836-3.795 15.444-1.329 19.236 5.517z"/></g><g stroke-width="3.181"><path d="M172.959 797.319h4.815v16.757h-4.815z"/><path d="M201.832 789.304c3.792 6.847 1.333 15.48-5.492 19.284-6.826 3.804-15.434 1.337-19.226-5.51a14.177 14.177 0 0 1-1.745-5.926c-.527 7.817-7.272 13.72-15.063 13.189-7.79-.532-13.676-7.297-13.146-15.11.53-7.815 7.275-13.718 15.065-13.187 2.045.14 4.036.723 5.86 1.713-6.677-4.017-8.862-12.725-4.856-19.447 4.007-6.723 12.688-8.914 19.39-4.895 6.702 4.018 8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.903 4.924c6.836-3.796 15.444-1.329 19.236 5.517z"/></g><g stroke-width="3.181"><path d="M172.959 864.067h4.815v16.758h-4.815z"/><path d="M201.832 856.053c3.792 6.846 1.333 15.48-5.492 19.283-6.826 3.804-15.434 1.337-19.226-5.509a14.177 14.177 0 0 1-1.745-5.926c-.527 7.816-7.272 13.72-15.063 13.188-7.79-.531-13.676-7.297-13.146-15.11.53-7.814 7.275-13.718 15.065-13.187 2.045.14 4.036.724 5.86 1.713-6.677-4.017-8.862-12.725-4.856-19.447 4.007-6.722 12.688-8.914 19.39-4.895s8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.903 4.924c6.836-3.795 15.444-1.329 19.236 5.518z"/></g><g stroke-width="3.181"><path d="M56.218 907.657h4.816V890.9h-4.816z"/><path d="M85.091 915.672c3.793-6.847 1.334-15.48-5.492-19.284-6.826-3.804-15.433-1.337-19.226 5.51a14.177 14.177 0 0 0-1.744 5.926c-.528-7.817-7.273-13.72-15.064-13.189-7.79.532-13.676 7.297-13.146 15.11.53 7.815 7.275 13.718 15.065 13.187a14.314 14.314 0 0 0 5.86-1.713c-6.677 4.018-8.862 12.725-4.855 19.447 4.006 6.723 12.687 8.914 19.39 4.895 6.702-4.018 8.887-12.726 4.88-19.448a14.314 14.314 0 0 0-4.904-4.924c6.837 3.796 15.444 1.329 19.236-5.517z"/></g><g stroke-width="3.181"><path d="M114.588 941.031h4.816v-16.757h-4.816z"/><path d="M143.462 949.046c3.792-6.846 1.333-15.48-5.493-19.284-6.826-3.803-15.433-1.337-19.225 5.51a14.177 14.177 0 0 0-1.745 5.926c-.528-7.817-7.273-13.72-15.063-13.189-7.79.532-13.676 7.297-13.147 15.111.53 7.814 7.275 13.718 15.066 13.186a14.314 14.314 0 0 0 5.859-1.713c-6.677 4.018-8.862 12.725-4.855 19.447 4.007 6.723 12.688 8.914 19.39 4.896 6.702-4.02 8.887-12.726 4.88-19.449a14.314 14.314 0 0 0-4.903-4.924c6.836 3.796 15.444 1.33 19.236-5.517z"/></g><g stroke-width="3.181"><path d="M172.959 974.405h4.815v-16.757h-4.815z"/><path d="M201.832 982.42c3.792-6.846 1.333-15.48-5.492-19.284-6.826-3.803-15.434-1.337-19.226 5.51a14.177 14.177 0 0 0-1.745 5.926c-.527-7.816-7.272-13.72-15.063-13.189-7.79.532-13.676 7.297-13.146 15.111.53 7.814 7.275 13.718 15.065 13.186a14.314 14.314 0 0 0 5.86-1.713c-6.677 4.018-8.862 12.725-4.856 19.447 4.007 6.723 12.688 8.914 19.39 4.896 6.702-4.019 8.887-12.726 4.88-19.449a14.314 14.314 0 0 0-4.903-4.924c6.836 3.796 15.444 1.33 19.236-5.517z"/></g><g stroke-width="3.181"><path d="M172.959 907.657h4.815V890.9h-4.815z"/><path d="M201.832 915.672c3.792-6.847 1.333-15.48-5.492-19.284-6.826-3.804-15.434-1.337-19.226 5.51a14.177 14.177 0 0 0-1.745 5.926c-.527-7.817-7.272-13.72-15.063-13.189-7.79.532-13.676 7.297-13.146 15.11.53 7.815 7.275 13.718 15.065 13.187a14.314 14.314 0 0 0 5.86-1.713c-6.677 4.018-8.862 12.725-4.856 19.447 4.007 6.723 12.688 8.914 19.39 4.895 6.702-4.018 8.887-12.726 4.88-19.448a14.314 14.314 0 0 0-4.903-4.924c6.836 3.796 15.444 1.329 19.236-5.517z"/></g></g></svg>

Any help is greatly appreciated. Thank you all smart people out there!!

Tags: framer-motion reactjs

Answers

Chosen as BEST ANSWER
- iangross7
- August 29, 2023 at 8:21 am
- 0 votes
0
For anybody else looking for a solution, here it is. You can scale a motion.div directly with the style = {{scale: 0.5}} prop.
```
import { motion } from 'framer-motion';
import { ReactComponent as TestCard } from '../assets/deckofcards/10c.svg'

import './Card.css'

export default function Card() {
    return (
        <div className='card-wrapper'>
          <motion.div drag dragSnapToOrigin="true" style = {{scale: 0.5}}>
            <TestCard />
          </motion.div>
        </div>
      );
}
```

(Edit)

Svgs should be used as components in React as it makes them easier to manipulate.

If this is your svg

<svg xmlns="http://www.w3.org/2000/svg" width="234" height="333"><g transform="translate(0 -719.362)"><rect width="233.244" height="332.244" x=".378" y="719.74" fill="#fff" stroke="gray" stroke-width=".756" rx="8.919" ry="8.946"/><g stroke-width="3.181"><path d="M56.218 864.067h4.816v16.758h-4.816z"/><path d="M85.091 856.053c3.793 6.846 1.334 15.48-5.492 19.283-6.826 3.804-15.433 1.337-19.226-5.509a14.177 14.177 0 0 1-1.744-5.926c-.528 7.816-7.273 13.72-15.064 13.188-7.79-.531-13.676-7.297-13.146-15.11.53-7.814 7.275-13.718 15.065-13.187 2.045.14 4.036.724 5.86 1.713-6.677-4.017-8.862-12.725-4.855-19.447 4.006-6.722 12.687-8.914 19.39-4.895 6.702 4.019 8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.904 4.924c6.837-3.795 15.444-1.329 19.236 5.518z"/></g><g aria-label="1" font-family="Levenim MT" font-size="3.772" font-weight="700" letter-spacing="0" style="line-height:0%;-inkscape-font-specification:&quot;Sans Bold&quot;" word-spacing="0"><path d="M23.835 544.63q0 .354-.127.623-.34.113-.735.113h-10.44q-.934 0-.934-.99 0-.17.029-.538.028-.382.028-.58 0-.933.82-.933H16v-13.071h-4.3q-.906 0-.906-.99 0-.212.043-.68.056-.48.056-.72 0-.482.905-.482.255 0 .962.057.708.042 1.104.042 2.263 0 2.744-1.57h2.702v17.414q.948 0 2.037-.057 1.103-.07 1.315-.07.82 0 1.019.438.155.382.155 1.994z" font-size="28.97" style="line-height:1.25" transform="scale(.72185 1.38533)"/></g><g aria-label="0" font-family="Levenim MT" font-size="3.772" font-weight="700" letter-spacing="0" style="line-height:0%;-inkscape-font-specification:&quot;Sans Bold&quot;" word-spacing="0"><path d="M38.073 518.577q0 9.67-6.685 9.67-6.78 0-6.78-9.724 0-10.089 6.915-10.089 6.55 0 6.55 10.143zm-3.512-.284q0-6.928-3.227-6.928-1.891 0-2.688 2.741-.5 1.73-.5 4.309 0 6.928 3.188 6.928 1.904 0 2.714-2.728.513-1.756.513-4.322z" font-size="27.659" style="line-height:1.25" transform="scale(.69919 1.43023)"/></g><g stroke-width="3.181"><path d="M16.402 775.116h1.605v5.586h-1.605z"/><path d="M26.026 772.445a4.735 4.735 0 0 1-1.83 6.428 4.705 4.705 0 0 1-6.41-1.837 4.726 4.726 0 0 1-.58-1.975 4.717 4.717 0 0 1-5.022 4.396 4.722 4.722 0 0 1-4.382-5.037 4.718 4.718 0 0 1 6.975-3.824 4.74 4.74 0 0 1-1.618-6.483 4.705 4.705 0 0 1 6.463-1.631 4.735 4.735 0 0 1 1.627 6.482 4.771 4.771 0 0 1-1.635 1.642 4.712 4.712 0 0 1 6.412 1.839z"/></g><g aria-label="1" font-family="Levenim MT" font-size="3.772" font-weight="700" letter-spacing="0" style="line-height:0%;-inkscape-font-specification:&quot;Sans Bold&quot;" word-spacing="0"><path d="M-300.333-734.284q0 .353-.127.622-.34.113-.736.113h-10.44q-.933 0-.933-.99 0-.17.029-.538.028-.381.028-.58 0-.933.82-.933h3.523v-13.07h-4.3q-.906 0-.906-.991 0-.212.042-.679.057-.48.057-.721 0-.481.905-.481.255 0 .962.056.707.043 1.104.043 2.263 0 2.744-1.57h2.702v17.413q.947 0 2.037-.057 1.103-.07 1.315-.07.82 0 1.019.438.155.382.155 1.995z" font-size="28.97" style="line-height:1.25" transform="scale(-.72185 -1.38533)"/></g><g aria-label="0" font-family="Levenim MT" font-size="3.772" font-weight="700" letter-spacing="0" style="line-height:0%;-inkscape-font-specification:&quot;Sans Bold&quot;" word-spacing="0"><path d="M-296.6-720.192q0 9.67-6.686 9.67-6.78 0-6.78-9.724 0-10.089 6.915-10.089 6.55 0 6.55 10.143zm-3.512-.284q0-6.928-3.228-6.928-1.89 0-2.688 2.741-.5 1.729-.5 4.309 0 6.928 3.188 6.928 1.904 0 2.715-2.728.513-1.756.513-4.322z" font-size="27.659" style="line-height:1.25" transform="scale(-.69919 -1.43023)"/></g><g stroke-width="3.181"><path d="M215.99 996.608h1.606v-5.586h-1.605z"/><path d="M225.615 999.28a4.735 4.735 0 0 0-1.83-6.428 4.705 4.705 0 0 0-6.41 1.836 4.726 4.726 0 0 0-.58 1.976 4.717 4.717 0 0 0-5.022-4.397 4.722 4.722 0 0 0-4.382 5.037 4.718 4.718 0 0 0 6.975 3.825 4.74 4.74 0 0 0-1.619 6.482 4.705 4.705 0 0 0 6.464 1.632 4.735 4.735 0 0 0 1.627-6.483 4.771 4.771 0 0 0-1.635-1.641 4.712 4.712 0 0 0 6.412-1.84z"/></g><g stroke-width="3.181"><path d="M56.218 974.405h4.816v-16.757h-4.816z"/><path d="M85.091 982.42c3.793-6.846 1.334-15.48-5.492-19.284-6.826-3.803-15.433-1.337-19.226 5.51a14.177 14.177 0 0 0-1.744 5.926c-.528-7.816-7.273-13.72-15.064-13.189-7.79.532-13.676 7.297-13.146 15.111.53 7.814 7.275 13.718 15.065 13.186a14.314 14.314 0 0 0 5.86-1.713c-6.677 4.018-8.862 12.725-4.855 19.447 4.006 6.723 12.687 8.914 19.39 4.896 6.702-4.019 8.887-12.726 4.88-19.449a14.314 14.314 0 0 0-4.904-4.924c6.837 3.796 15.444 1.33 19.236-5.517z"/></g><g stroke-width="3.181"><path d="M56.218 797.319h4.816v16.757h-4.816z"/><path d="M85.091 789.304c3.793 6.847 1.334 15.48-5.492 19.284-6.826 3.804-15.433 1.337-19.226-5.51a14.177 14.177 0 0 1-1.744-5.926c-.528 7.817-7.273 13.72-15.064 13.189-7.79-.532-13.676-7.297-13.146-15.11.53-7.815 7.275-13.718 15.065-13.187 2.045.14 4.036.723 5.86 1.713-6.677-4.017-8.862-12.725-4.855-19.447 4.006-6.723 12.687-8.914 19.39-4.895 6.702 4.018 8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.904 4.924c6.837-3.796 15.444-1.329 19.236 5.517z"/></g><g stroke-width="3.181"><path d="M114.588 830.693h4.816v16.757h-4.816z"/><path d="M143.462 822.678c3.792 6.847 1.333 15.48-5.493 19.284-6.826 3.804-15.433 1.337-19.225-5.51a14.177 14.177 0 0 1-1.745-5.926c-.528 7.817-7.273 13.72-15.063 13.189-7.79-.531-13.676-7.297-13.147-15.11.53-7.815 7.275-13.718 15.066-13.187 2.045.14 4.035.724 5.859 1.713-6.677-4.017-8.862-12.725-4.855-19.447 4.007-6.722 12.688-8.914 19.39-4.895 6.702 4.018 8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.903 4.924c6.836-3.795 15.444-1.329 19.236 5.517z"/></g><g stroke-width="3.181"><path d="M172.959 797.319h4.815v16.757h-4.815z"/><path d="M201.832 789.304c3.792 6.847 1.333 15.48-5.492 19.284-6.826 3.804-15.434 1.337-19.226-5.51a14.177 14.177 0 0 1-1.745-5.926c-.527 7.817-7.272 13.72-15.063 13.189-7.79-.532-13.676-7.297-13.146-15.11.53-7.815 7.275-13.718 15.065-13.187 2.045.14 4.036.723 5.86 1.713-6.677-4.017-8.862-12.725-4.856-19.447 4.007-6.723 12.688-8.914 19.39-4.895 6.702 4.018 8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.903 4.924c6.836-3.796 15.444-1.329 19.236 5.517z"/></g><g stroke-width="3.181"><path d="M172.959 864.067h4.815v16.758h-4.815z"/><path d="M201.832 856.053c3.792 6.846 1.333 15.48-5.492 19.283-6.826 3.804-15.434 1.337-19.226-5.509a14.177 14.177 0 0 1-1.745-5.926c-.527 7.816-7.272 13.72-15.063 13.188-7.79-.531-13.676-7.297-13.146-15.11.53-7.814 7.275-13.718 15.065-13.187 2.045.14 4.036.724 5.86 1.713-6.677-4.017-8.862-12.725-4.856-19.447 4.007-6.722 12.688-8.914 19.39-4.895s8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.903 4.924c6.836-3.795 15.444-1.329 19.236 5.518z"/></g><g stroke-width="3.181"><path d="M56.218 907.657h4.816V890.9h-4.816z"/><path d="M85.091 915.672c3.793-6.847 1.334-15.48-5.492-19.284-6.826-3.804-15.433-1.337-19.226 5.51a14.177 14.177 0 0 0-1.744 5.926c-.528-7.817-7.273-13.72-15.064-13.189-7.79.532-13.676 7.297-13.146 15.11.53 7.815 7.275 13.718 15.065 13.187a14.314 14.314 0 0 0 5.86-1.713c-6.677 4.018-8.862 12.725-4.855 19.447 4.006 6.723 12.687 8.914 19.39 4.895 6.702-4.018 8.887-12.726 4.88-19.448a14.314 14.314 0 0 0-4.904-4.924c6.837 3.796 15.444 1.329 19.236-5.517z"/></g><g stroke-width="3.181"><path d="M114.588 941.031h4.816v-16.757h-4.816z"/><path d="M143.462 949.046c3.792-6.846 1.333-15.48-5.493-19.284-6.826-3.803-15.433-1.337-19.225 5.51a14.177 14.177 0 0 0-1.745 5.926c-.528-7.817-7.273-13.72-15.063-13.189-7.79.532-13.676 7.297-13.147 15.111.53 7.814 7.275 13.718 15.066 13.186a14.314 14.314 0 0 0 5.859-1.713c-6.677 4.018-8.862 12.725-4.855 19.447 4.007 6.723 12.688 8.914 19.39 4.896 6.702-4.02 8.887-12.726 4.88-19.449a14.314 14.314 0 0 0-4.903-4.924c6.836 3.796 15.444 1.33 19.236-5.517z"/></g><g stroke-width="3.181"><path d="M172.959 974.405h4.815v-16.757h-4.815z"/><path d="M201.832 982.42c3.792-6.846 1.333-15.48-5.492-19.284-6.826-3.803-15.434-1.337-19.226 5.51a14.177 14.177 0 0 0-1.745 5.926c-.527-7.816-7.272-13.72-15.063-13.189-7.79.532-13.676 7.297-13.146 15.111.53 7.814 7.275 13.718 15.065 13.186a14.314 14.314 0 0 0 5.86-1.713c-6.677 4.018-8.862 12.725-4.856 19.447 4.007 6.723 12.688 8.914 19.39 4.896 6.702-4.019 8.887-12.726 4.88-19.449a14.314 14.314 0 0 0-4.903-4.924c6.836 3.796 15.444 1.33 19.236-5.517z"/></g><g stroke-width="3.181"><path d="M172.959 907.657h4.815V890.9h-4.815z"/><path d="M201.832 915.672c3.792-6.847 1.333-15.48-5.492-19.284-6.826-3.804-15.434-1.337-19.226 5.51a14.177 14.177 0 0 0-1.745 5.926c-.527-7.817-7.272-13.72-15.063-13.189-7.79.532-13.676 7.297-13.146 15.11.53 7.815 7.275 13.718 15.065 13.187a14.314 14.314 0 0 0 5.86-1.713c-6.677 4.018-8.862 12.725-4.856 19.447 4.007 6.723 12.688 8.914 19.39 4.895 6.702-4.018 8.887-12.726 4.88-19.448a14.314 14.314 0 0 0-4.903-4.924c6.836 3.796 15.444 1.329 19.236-5.517z"/></g></g></svg>

First transform it into a component

const SvgComponent = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={234} height={333} {...props}>
    <g transform="translate(0 -719.362)">
      <rect
        width={233.244}
        height={332.244}
        x={0.378}
        y={719.74}
        fill="#fff"
        stroke="gray"
        strokeWidth={0.756}
        rx={8.919}
        ry={8.946}
      />
      <g strokeWidth={3.181}>
        <path d="M56.218 864.067h4.816v16.758h-4.816z" />
        <path d="M85.091 856.053c3.793 6.846 1.334 15.48-5.492 19.283-6.826 3.804-15.433 1.337-19.226-5.509a14.177 14.177 0 0 1-1.744-5.926c-.528 7.816-7.273 13.72-15.064 13.188-7.79-.531-13.676-7.297-13.146-15.11.53-7.814 7.275-13.718 15.065-13.187 2.045.14 4.036.724 5.86 1.713-6.677-4.017-8.862-12.725-4.855-19.447 4.006-6.722 12.687-8.914 19.39-4.895 6.702 4.019 8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.904 4.924c6.837-3.795 15.444-1.329 19.236 5.518z" />
      </g>
      <g
        style={{
          lineHeight: "0%",
          InkscapeFontSpecification: "&quot",
        }}
        wordSpacing={0}
      >
        <path
          d="M23.835 544.63q0 .354-.127.623-.34.113-.735.113h-10.44q-.934 0-.934-.99 0-.17.029-.538.028-.382.028-.58 0-.933.82-.933H16v-13.071h-4.3q-.906 0-.906-.99 0-.212.043-.68.056-.48.056-.72 0-.482.905-.482.255 0 .962.057.708.042 1.104.042 2.263 0 2.744-1.57h2.702v17.414q.948 0 2.037-.057 1.103-.07 1.315-.07.82 0 1.019.438.155.382.155 1.994z"
          aria-label={1}
          fontFamily="Levenim MT"
          fontSize={28.97}
          fontWeight={700}
          letterSpacing={0}
          style={{
            lineHeight: 1.25,
          }}
          transform="scale(.72185 1.38533)"
        />
      </g>
      <g
        style={{
          lineHeight: "0%",
          InkscapeFontSpecification: "&quot",
        }}
        wordSpacing={0}
      >
        <path
          d="M38.073 518.577q0 9.67-6.685 9.67-6.78 0-6.78-9.724 0-10.089 6.915-10.089 6.55 0 6.55 10.143zm-3.512-.284q0-6.928-3.227-6.928-1.891 0-2.688 2.741-.5 1.73-.5 4.309 0 6.928 3.188 6.928 1.904 0 2.714-2.728.513-1.756.513-4.322z"
          aria-label={0}
          fontFamily="Levenim MT"
          fontSize={27.659}
          fontWeight={700}
          letterSpacing={0}
          style={{
            lineHeight: 1.25,
          }}
          transform="scale(.69919 1.43023)"
        />
      </g>
      <g strokeWidth={3.181}>
        <path d="M16.402 775.116h1.605v5.586h-1.605z" />
        <path d="M26.026 772.445a4.735 4.735 0 0 1-1.83 6.428 4.705 4.705 0 0 1-6.41-1.837 4.726 4.726 0 0 1-.58-1.975 4.717 4.717 0 0 1-5.022 4.396 4.722 4.722 0 0 1-4.382-5.037 4.718 4.718 0 0 1 6.975-3.824 4.74 4.74 0 0 1-1.618-6.483 4.705 4.705 0 0 1 6.463-1.631 4.735 4.735 0 0 1 1.627 6.482 4.771 4.771 0 0 1-1.635 1.642 4.712 4.712 0 0 1 6.412 1.839z" />
      </g>
      <g
        style={{
          lineHeight: "0%",
          InkscapeFontSpecification: "&quot",
        }}
        wordSpacing={0}
      >
        <path
          d="M-300.333-734.284q0 .353-.127.622-.34.113-.736.113h-10.44q-.933 0-.933-.99 0-.17.029-.538.028-.381.028-.58 0-.933.82-.933h3.523v-13.07h-4.3q-.906 0-.906-.991 0-.212.042-.679.057-.48.057-.721 0-.481.905-.481.255 0 .962.056.707.043 1.104.043 2.263 0 2.744-1.57h2.702v17.413q.947 0 2.037-.057 1.103-.07 1.315-.07.82 0 1.019.438.155.382.155 1.995z"
          aria-label={1}
          fontFamily="Levenim MT"
          fontSize={28.97}
          fontWeight={700}
          letterSpacing={0}
          style={{
            lineHeight: 1.25,
          }}
          transform="scale(-.72185 -1.38533)"
        />
      </g>
      <g
        style={{
          lineHeight: "0%",
          InkscapeFontSpecification: "&quot",
        }}
        wordSpacing={0}
      >
        <path
          d="M-296.6-720.192q0 9.67-6.686 9.67-6.78 0-6.78-9.724 0-10.089 6.915-10.089 6.55 0 6.55 10.143zm-3.512-.284q0-6.928-3.228-6.928-1.89 0-2.688 2.741-.5 1.729-.5 4.309 0 6.928 3.188 6.928 1.904 0 2.715-2.728.513-1.756.513-4.322z"
          aria-label={0}
          fontFamily="Levenim MT"
          fontSize={27.659}
          fontWeight={700}
          letterSpacing={0}
          style={{
            lineHeight: 1.25,
          }}
          transform="scale(-.69919 -1.43023)"
        />
      </g>
      <g strokeWidth={3.181}>
        <path d="M215.99 996.608h1.606v-5.586h-1.605z" />
        <path d="M225.615 999.28a4.735 4.735 0 0 0-1.83-6.428 4.705 4.705 0 0 0-6.41 1.836 4.726 4.726 0 0 0-.58 1.976 4.717 4.717 0 0 0-5.022-4.397 4.722 4.722 0 0 0-4.382 5.037 4.718 4.718 0 0 0 6.975 3.825 4.74 4.74 0 0 0-1.619 6.482 4.705 4.705 0 0 0 6.464 1.632 4.735 4.735 0 0 0 1.627-6.483 4.771 4.771 0 0 0-1.635-1.641 4.712 4.712 0 0 0 6.412-1.84z" />
      </g>
      <g strokeWidth={3.181}>
        <path d="M56.218 974.405h4.816v-16.757h-4.816z" />
        <path d="M85.091 982.42c3.793-6.846 1.334-15.48-5.492-19.284-6.826-3.803-15.433-1.337-19.226 5.51a14.177 14.177 0 0 0-1.744 5.926c-.528-7.816-7.273-13.72-15.064-13.189-7.79.532-13.676 7.297-13.146 15.111.53 7.814 7.275 13.718 15.065 13.186a14.314 14.314 0 0 0 5.86-1.713c-6.677 4.018-8.862 12.725-4.855 19.447 4.006 6.723 12.687 8.914 19.39 4.896 6.702-4.019 8.887-12.726 4.88-19.449a14.314 14.314 0 0 0-4.904-4.924c6.837 3.796 15.444 1.33 19.236-5.517z" />
      </g>
      <g strokeWidth={3.181}>
        <path d="M56.218 797.319h4.816v16.757h-4.816z" />
        <path d="M85.091 789.304c3.793 6.847 1.334 15.48-5.492 19.284-6.826 3.804-15.433 1.337-19.226-5.51a14.177 14.177 0 0 1-1.744-5.926c-.528 7.817-7.273 13.72-15.064 13.189-7.79-.532-13.676-7.297-13.146-15.11.53-7.815 7.275-13.718 15.065-13.187 2.045.14 4.036.723 5.86 1.713-6.677-4.017-8.862-12.725-4.855-19.447 4.006-6.723 12.687-8.914 19.39-4.895 6.702 4.018 8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.904 4.924c6.837-3.796 15.444-1.329 19.236 5.517z" />
      </g>
      <g strokeWidth={3.181}>
        <path d="M114.588 830.693h4.816v16.757h-4.816z" />
        <path d="M143.462 822.678c3.792 6.847 1.333 15.48-5.493 19.284-6.826 3.804-15.433 1.337-19.225-5.51a14.177 14.177 0 0 1-1.745-5.926c-.528 7.817-7.273 13.72-15.063 13.189-7.79-.531-13.676-7.297-13.147-15.11.53-7.815 7.275-13.718 15.066-13.187 2.045.14 4.035.724 5.859 1.713-6.677-4.017-8.862-12.725-4.855-19.447 4.007-6.722 12.688-8.914 19.39-4.895 6.702 4.018 8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.903 4.924c6.836-3.795 15.444-1.329 19.236 5.517z" />
      </g>
      <g strokeWidth={3.181}>
        <path d="M172.959 797.319h4.815v16.757h-4.815z" />
        <path d="M201.832 789.304c3.792 6.847 1.333 15.48-5.492 19.284-6.826 3.804-15.434 1.337-19.226-5.51a14.177 14.177 0 0 1-1.745-5.926c-.527 7.817-7.272 13.72-15.063 13.189-7.79-.532-13.676-7.297-13.146-15.11.53-7.815 7.275-13.718 15.065-13.187 2.045.14 4.036.723 5.86 1.713-6.677-4.017-8.862-12.725-4.856-19.447 4.007-6.723 12.688-8.914 19.39-4.895 6.702 4.018 8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.903 4.924c6.836-3.796 15.444-1.329 19.236 5.517z" />
      </g>
      <g strokeWidth={3.181}>
        <path d="M172.959 864.067h4.815v16.758h-4.815z" />
        <path d="M201.832 856.053c3.792 6.846 1.333 15.48-5.492 19.283-6.826 3.804-15.434 1.337-19.226-5.509a14.177 14.177 0 0 1-1.745-5.926c-.527 7.816-7.272 13.72-15.063 13.188-7.79-.531-13.676-7.297-13.146-15.11.53-7.814 7.275-13.718 15.065-13.187 2.045.14 4.036.724 5.86 1.713-6.677-4.017-8.862-12.725-4.856-19.447 4.007-6.722 12.688-8.914 19.39-4.895s8.887 12.726 4.88 19.448a14.314 14.314 0 0 1-4.903 4.924c6.836-3.795 15.444-1.329 19.236 5.518z" />
      </g>
      <g strokeWidth={3.181}>
        <path d="M56.218 907.657h4.816V890.9h-4.816z" />
        <path d="M85.091 915.672c3.793-6.847 1.334-15.48-5.492-19.284-6.826-3.804-15.433-1.337-19.226 5.51a14.177 14.177 0 0 0-1.744 5.926c-.528-7.817-7.273-13.72-15.064-13.189-7.79.532-13.676 7.297-13.146 15.11.53 7.815 7.275 13.718 15.065 13.187a14.314 14.314 0 0 0 5.86-1.713c-6.677 4.018-8.862 12.725-4.855 19.447 4.006 6.723 12.687 8.914 19.39 4.895 6.702-4.018 8.887-12.726 4.88-19.448a14.314 14.314 0 0 0-4.904-4.924c6.837 3.796 15.444 1.329 19.236-5.517z" />
      </g>
      <g strokeWidth={3.181}>
        <path d="M114.588 941.031h4.816v-16.757h-4.816z" />
        <path d="M143.462 949.046c3.792-6.846 1.333-15.48-5.493-19.284-6.826-3.803-15.433-1.337-19.225 5.51a14.177 14.177 0 0 0-1.745 5.926c-.528-7.817-7.273-13.72-15.063-13.189-7.79.532-13.676 7.297-13.147 15.111.53 7.814 7.275 13.718 15.066 13.186a14.314 14.314 0 0 0 5.859-1.713c-6.677 4.018-8.862 12.725-4.855 19.447 4.007 6.723 12.688 8.914 19.39 4.896 6.702-4.02 8.887-12.726 4.88-19.449a14.314 14.314 0 0 0-4.903-4.924c6.836 3.796 15.444 1.33 19.236-5.517z" />
      </g>
      <g strokeWidth={3.181}>
        <path d="M172.959 974.405h4.815v-16.757h-4.815z" />
        <path d="M201.832 982.42c3.792-6.846 1.333-15.48-5.492-19.284-6.826-3.803-15.434-1.337-19.226 5.51a14.177 14.177 0 0 0-1.745 5.926c-.527-7.816-7.272-13.72-15.063-13.189-7.79.532-13.676 7.297-13.146 15.111.53 7.814 7.275 13.718 15.065 13.186a14.314 14.314 0 0 0 5.86-1.713c-6.677 4.018-8.862 12.725-4.856 19.447 4.007 6.723 12.688 8.914 19.39 4.896 6.702-4.019 8.887-12.726 4.88-19.449a14.314 14.314 0 0 0-4.903-4.924c6.836 3.796 15.444 1.33 19.236-5.517z" />
      </g>
      <g strokeWidth={3.181}>
        <path d="M172.959 907.657h4.815V890.9h-4.815z" />
        <path d="M201.832 915.672c3.792-6.847 1.333-15.48-5.492-19.284-6.826-3.804-15.434-1.337-19.226 5.51a14.177 14.177 0 0 0-1.745 5.926c-.527-7.817-7.272-13.72-15.063-13.189-7.79.532-13.676 7.297-13.146 15.11.53 7.815 7.275 13.718 15.065 13.187a14.314 14.314 0 0 0 5.86-1.713c-6.677 4.018-8.862 12.725-4.856 19.447 4.007 6.723 12.688 8.914 19.39 4.895 6.702-4.018 8.887-12.726 4.88-19.448a14.314 14.314 0 0 0-4.903-4.924c6.836 3.796 15.444 1.329 19.236-5.517z" />
      </g>
    </g>
  </svg>
)
export default SvgComponent

you can use svgr playground to make svg components, pretty handy.

Now to change height and width without any truncation on the svg add viewBox property to your svg component

Change this

<svg xmlns="http://www.w3.org/2000/svg" width={234} height={333} {...props}>

to accept width and height props and add viewBox property

<svg
    xmlns="http://www.w3.org/2000/svg"
    width={props?.width ? props?.width : 234}
    height={props?.height ? props?.height : 333}
    viewBox="0 0 234 333"
    {...props}
  >

here we check if width or height prop is passed, if yes use that value, else use the default one, also apply viewBox to svg.

Now in your Card component, use svg component

import SvgComponent from "path-to-your-file"

//...
<motion.div drag dragSnapToOrigin="true">
  // <TestCard />
  <SvgComponent
    width={100}
    height={100}
  />
</motion.div>

This should work, let me know in the comments if need more help.

Please signup or login to give your own answer.

Click here to cancel reply.

Reactjs – How to resize an SVG in React and keep it compatible with a FramerMotion div?

Answers