search

htdebeer / SVG-cards

A set of playing cards in SVG (now also with a rendering in PNG)
GNU Lesser General Public License v2.1
147 stars 44 forks source link

nothing renders #4

Closed cmstroscio closed 4 years ago

cmstroscio commented 4 years ago

Hello,

This is awesome! I can't get anything to render though.

I ran npm install --save svg-cards

and then added this example code to the html:

  `<svg 
      width="600"
      height="400"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      >

      <!-- The cards have a natural width of 169.075 and a height of 244.640. It
           center is located at (+98.0375, +122.320). -->
      <!-- The original back color was #0062ff. The color of the back card can
           be changed by setting the fill on the USE-element. -->

      <use xlink:href="svg-cards-indented.svg#back" x="150" y="10" fill="red"/>
      <use xlink:href="svg-cards-indented.svg#heart_1" x="0" y="0"/>
      <use xlink:href="svg-cards-indented.svg#joker_black" x="100" y="100"/>
      <use xlink:href="svg-cards-indented.svg#spade_10" x="200" y="200" transform="rotate(45,198.0375,122.320)scale(0.5)"/>
      <use xlink:href="svg-cards-indented.svg#club_jack" x="300" y="100" transform="rotate(75,198.0375,122.320)scale(0.75)"/>
  </svg>`

Am I missing something?

I also tried extracting the jack of diamonds from the file (only need jacks right now), and opening in illustrator, but it didn't look right (I wrapped it in an svg tag before saving):

`

`

Thanks for your help with this! Marshall

htdebeer commented 4 years ago

It is possible the referencing to external SVG files is only working when both the HTML file and external SVG file are served from the same server.

The following is working on my end:

  1. Clone this repository

    cd some_directory
clone git@github.com:htdebeer/SVG-cards.git

  2. Go to that directory

    cd SVG-cards

  3. Create a file test.html in that directory with the following contents:

    <!DOCTYPE html>
<html lang="en">
  <body>
    <h1>Example SVG with cards</h1>
    <svg 
      width="600"
      height="400"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      >

      <!-- The cards have a natural width of 169.075 and a height of 244.640. It
        center is located at (+98.0375, +122.320). -->
      <!-- The original back color was #0062ff. The color of the back card can
        be changed by setting the fill on the USE-element. -->

        <use xlink:href="svg-cards-indented.svg#back" x="150" y="10" fill="red"/>
        <use xlink:href="svg-cards-indented.svg#heart_1" x="0" y="0"/>
        <use xlink:href="svg-cards-indented.svg#joker_black" x="100" y="100"/>
        <use xlink:href="svg-cards-indented.svg#spade_10" x="200" y="200" transform="rotate(45,198.0375,122.320)scale(0.5)"/>
        <use xlink:href="svg-cards-indented.svg#club_jack" x="300" y="100" transform="rotate(75,198.0375,122.320)scale(0.75)"/>
    </svg>

  4. Run a web server in that same directory, for example using http-server:

    http-server .

    This will start a web server that serves the current directory on port 8080.

  5. Open a web browser (I used Firefox) and navigate to http://localhost:8080/test.html. I now see the example with the five cards.

Can you try these steps and report the results?

cmstroscio commented 4 years ago

That worked, thanks! What do I need to do now to use it in a different repo?

htdebeer commented 4 years ago

Basically the same: as long as you can serve this SVG file from within that different repo, all you need to do is adapt the xlink:href attribute in the USE element to point to that served SVG file. Thus something like <use xlink:href="some/path/to/svg-cards-indented.svg#club_jack" .../>, where some/path/to is a subdirectory of that different repo.

Do note that USEing external SVG files inside another SVG document might not be very well supported and / or that support might deteriorate in the coming years do to the inpopularity of the SVG project among some of the big browser building organizations and security concerns.

cmstroscio commented 4 years ago

I updated the path and they are rendering now. Thanks!

Why are the suits cut off on the jacks though?

For example the club on the jack of clubs?

https://github.com/htdebeer/SVG-cards

cmstroscio commented 4 years ago

Never mind the last question. I see that it is cut off on some French decks. Thanks again!

hhirsch commented 4 years ago

I suggest to put this information in the readme how to get this example to run.