Creating an interactive SVG map is simple but laborious.

First you must create the SVG file, it is necessary to create the state separately, for this I will demonstrate using the image editorGIMP:

Open GIMP and import an image from the map of Brazil

Resize the image to the desired size, in the example the size is 600px X 590px.

Select the first state, in the example I selected the Acre, the more it is indifferent.

Using the magic wand selection tool, select the state.

After selected, click the menu select > for Vector

Enable the vectors window by clicking the menu Windows > dock dialogs > vectors. Right-click on the vector and export to vector:

Save and open the file, using the notepad++, you will find the Code:

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="590"
     viewBox="0 0 432 428">
  <path id="seleçao" ...

Change id from path to desired state id, example:

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="590"
     viewBox="0 0 432 428">
  <path id="acre" ...

Repeat the process for each state, but in the next you will only use the generated path code. In this way it will be possible to generate the SVG code of the drawing and work with CSS and jQuery and manipulate the map in the way you want.

In the example, I created a div with id="mapa" and put the code inside this div:

<div id="mapa">
  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="590" viewBox="0 0 432 428">
    <path id="acre" data-name="Acre"
        fill="none" stroke="black" stroke-width="1"
        d="M 40.00,152.22
           C 40.00 ..." />
    <text x="15" y="160">AC</text>

    <path id="amazonas" data-name="Amazonas"
        fill="none" stroke="black" stroke-width="1"
        d="M 107.4 ..." />
    <text x="95" y="105">AM</text>
  </svg>
</div>

No CSS

#mapa svg path {
    stroke:#200772; /*cor da borda do estado*/
    fill:#4671D5; /*cor do estado*/
    cursor:pointer;
}

#mapa svg path:hover {
    fill:#be2f33;
    stroke:#be2f33;
}

See in the simple online example, with only two states JSFiddle, because as I mentioned it is laborious:)

Note: This is a simple example of how to create, you can work to add the texts, acronyms and what else you want.