Neovictorian Paisley Menswear
    Wondering what’s next for npm?Check out our public roadmap! »


    1.1.2 • Public • Published

    SVG Japan

    A native JavaScript-built plugin that generates an interactive SVG-formatted map of Japan.

    GitHub package.json version GitHub top language npm GitHub code size in bytes GitHub

    FeaturesQuick StartUsageSupported DevicesDocumentationDemonstrationCreatorsLicense



    • Multiple types of Japanese maps can be generated.
    • The presence or absence of a map border can be switch.
    • Regions can be defined by freely grouping prefectures.
    • All prefectures can be unified in one color.
    • Normal and active colors can be set for each prefecture and region.
    • The tip helper can be pop up when on mouse over.
    • You can get the event fired on JavaScript when the prefecture is clicked.

    Quick Start

    Several quick start options are available:

    • Clone this repository
    git clone
    • Install from npm
    npm install svg-japan
    • Download an archive file of latest release Letest Release
    • Retrieve via CDN into your HTML
    <script src=""></script>


    1. Include this plugin script into your HTML.
    <script src="/path/to/svg-japan.min.js"></script>
    1. Then mark up the element where you want to insert the map.
    <div id="my-map-container"></div>
    1. Finally, instantiate the plugin class in your script.
    svgJapan({ element: "#my-map-container" })

    Alternatively, you can create the container element in JavaScript.

    var map = svgJapan()
    document.body.appendChild( map.map_container )

    It is desirable to execute the dispatcher function after the files of this plugin are completely loaded. To do this, a structure that waits for the DOM content to finish loading, such as:

    document.addEventListener( 'DOMContentLoaded', function() {
    }, false)

    Supported Devices

    Please refer to the target device definition of JS transpiling (excerpt from "babel.config.js" below):

    targets: {
      chrome: "67",
      edge: "17",
      firefox: "60",
      ie: "11",
      safari: "11.1",


    Refer to the following page for the options that can be set and the method description.

    Interactive Japan Map Generation Plugin


    The shortcut is to use it for the time being.



    ka2 (Katsuhiko Maeno)

    If you liked using this app or it has helped you in any way, I'd like you send me an email at about anything you'd want to say about this software. I'd really appreciate it!

    Copyright and license

    Code and documentation copyright 2020 the ka2. Code released under the MIT License.


    npm i svg-japan

    DownloadsWeekly Downloads






    Unpacked Size

    1.85 MB

    Total Files



    Last publish


    • avatar