Creating an Interactive Nervous System Diagram with HTML, CSS, and SVG

Introduction

This article provides a comprehensive guide on creating an interactive and scalable visual representation of the nervous system using HTML, CSS, and SVG. It covers the HTML structure, CSS styling, and SVG content necessary to build a diagram that can adapt to various screen sizes while maintaining its aspect ratio. HTML character entities play a crucial role in displaying reserved characters and special symbols within HTML documents. These entities, denoted by starting with an ampersand (&) and ending with a semicolon (;), ensure that symbols like the less-than sign (<) and the greater-than sign (>) are correctly interpreted by web browsers, avoiding conflicts with HTML syntax. Additionally, character entities facilitate the inclusion of characters that are not easily typed on a keyboard, such as non-breaking spaces ( ) and copyright symbols (©), enhancing the accuracy and readability of HTML content. The use of entities like < and > in this article illustrates the display of HTML code within the browser without being interpreted as actual HTML tags.

CSS Styling

The CSS ensures the SVG scales to the width of its container while maintaining its aspect ratio.

/* CSS to resize SVG */
.svg-container {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
}

SVG Content and Styling

The SVG content includes a style block to define the classes used within the SVG. This style block is wrapped in CDATA to allow special characters within XML.

            <style>
                <![CDATA[
                svg text { white-space: pre; }
                .A { fill: #EEF7F6; }
                .B { fill: #000; }
                .C { stroke: none; }
                .D { font-size: 6px; }
                .E { fill: #cff; }
                .F { text-anchor: start; }
                ]]>
            </style>
  1. <path> tag and d attribute:
    • The <path> tag defines a drawable path.
    • The d attribute specifies the path data. It contains a series of commands and coordinates that define the path's shape.
    • In the given code:
      • M143.122 7.0591: Move to the point (143.122, 7.0591) without drawing anything.
      • h37.7953: Draw a horizontal line to the right by 37.7953 units.
      • v11.3386: Draw a vertical line downward by 11.3386 units.
      • H143.122: Draw a horizontal line to the left, back to the starting x-coordinate.
      • M18.3976 25.9567: Move to a new starting point at (18.3976, 25.9567).
      • h37.7953: Draw a horizontal line to the right by 37.7953 units.
      • v15.1181: Draw a vertical line downward by 15.1181 units.
      • H18.3976: Draw a horizontal line to the left, back to the starting x-coordinate.
      • zm124.7245 0: Move relative to the last point by 124.7245 units horizontally.
      • h37.7953: Draw a horizontal line to the right by 37.7953 units.
      • v15.1181: Draw a vertical line downward by 15.1181 units.
      • h-37.7953: Draw a horizontal line to the left by 37.7953 units, closing the path.
    2. <path d="M143.122 7.0591h37.7953v11.3386H143.122zM18.3976 25.9567h37.7953v15.1181H18.3976zm124.7245 0h37.7953v15.1181h-37.7953z" class="E"/>
  2. <text> tag and font-size attribute:
    • The <text> tag is used to add text to an SVG image.
    • The font-size attribute sets the size of the text.
    • In the provided code:
      • font-size="8" sets the font size to 8 units.
      • class="B C" applies CSS classes B and C to style the text.
      • The text "CNS" is placed at the specified coordinates (97.7678, 17.2581) within the SVG canvas.
      • The text "PNS" is placed at another set of coordinates within the SVG canvas.
    3. <text font-size="8" class="B C"><tspan x="97.7678" y="17.2581">CNS</tspan><tspan x="97.7678" y="36.1557">PNS</tspan></text>

Overall Structure

    <div class="svg-container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="100%" height="100%" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd" font-family="Roboto" font-size="14" text-anchor="middle">
            <style>
                <![CDATA[
                svg text { white-space: pre; }
                .A { fill: #EEF7F6; }
                .B { fill: #000; }
                .C { stroke: none; }
                .D { font-size: 6px; }
                .E { fill: #cff; }
                .F { text-anchor: start; }
                ]]>
            </style>
            <path d="M18.3976 7.0591h37.7953v11.3386H18.3976z" class="E"/>
            <text class="B C D"><tspan x="37.2952" y="14.7084">Brain</tspan></text>
            <path d="M143.122 7.0591h37.7953v11.3386H143.122zM18.3976 25.9567h37.7953v15.1181H18.3976zm124.7245 0h37.7953v15.1181h-37.7953z" class="E"/>
            <text font-size="8" class="B C"><tspan x="97.7678" y="17.2581">CNS</tspan><tspan x="97.7678" y="36.1557">PNS</tspan></text>
            <text class="B C D"><tspan x="162.0196" y="14.7084">Spinal Cord</tspan><tspan x="162.0196" y="31.8958">Spinal </tspan><tspan x="162.0196" y="39.0958">Nerves</tspan><tspan x="37.2952" y="31.8958">Cranial </tspan><tspan x="37.2952" y="39.0958">Nerves</tspan></text>
            <path d="M18.3976 75.0906h37.7953v15.1181H18.3976z" class="E"/>
            <path d="M37.2953 18.3977v3.7795h0v3.7795m124.7244-7.559v3.7795h0v3.7795M37.2953 41.0748v7.5591h0v7.559m124.7244-15.1181v7.5591h0v7.559m-124.7244 0h124.7244m-68.0315 0v5.6693h0v5.6693m0 0H65.6418h0-28.3465m-.0001 0v3.7796h0v3.7795m56.693-7.5591h68.0315" fill="none"/>
            <path d="M143.1221 75.0905h37.7953v15.1181h-37.7953z" class="E"/>
            <path fill="none" d="M162.0197 67.5315v3.7795h0v3.7795"/>
            <text class="B C D"><tspan x="37.2952" y="81.0297">Sensory </tspan><tspan x="37.2952" y="88.2297">Neurons</tspan><tspan x="162.0196" y="81.0297">Motor </tspan><tspan x="162.0196" y="88.2297">Neurons</tspan></text>
            <path d="M18.3976 90.2087h37.7953v22.6772H18.3976z" class="A"/>
            <text class="B C D F"><tspan x="20.3976" y="96.3273">Sensory </tspan><tspan x="20.3976" y="103.5273">organs to </tspan><tspan x="20.3976" y="110.7273">CNS</tspan></text>
            <path d="M143.122 90.2086h37.7953v22.6772H143.122z" class="A"/>
            <text class="B C D F"><tspan x="145.122" y="96.3273">CNS to </tspan><tspan x="145.122" y="103.5273">muscles </tspan><tspan x="145.122" y="110.7273">and glands</tspan></text>
            <path d="M150.6811 131.7834h37.7953v11.3386h-37.7953z" class="E"/>
            <text class="B C D"><tspan x="169.5787" y="139.4327">ANS</tspan></text>
            <path d="M59.9725 131.7835h37.7953v22.6772H59.9725z" class="E"/>
            <path d="M169.5787 131.7834v-3.7795h0v-3.7795m-90.7086 0h90.7087m-7.5592-11.3386v5.6693h0v5.6693" fill="none"/>
            <text class="B C D"><tspan x="78.8701" y="137.9021">Somatic </tspan><tspan x="78.8701" y="145.1021">nervous </tspan><tspan x="78.8701" y="152.3021">system</tspan></text>
            <path d="M146.9016 160.1299h49.1339v22.6772h-49.1339zm-41.5748 0h37.7953v22.6772h-37.7953z" class="E"/>
            <path fill="none" d="M169.5787 143.122v3.7796h0v3.7795"/>
            <text class="B C D F"><tspan x="107.3268" y="166.2485">Sympathetic </tspan><tspan x="107.3268" y="173.4485">nervous </tspan><tspan x="107.3268" y="180.6485">system</tspan><tspan x="148.9016" y="169.8485">Parasympathetic </tspan><tspan x="148.9016" y="177.0485">nervous system</tspan></text>
            <path d="M78.8701 131.7835v-3.7796h0v-3.7795m92.5984 35.9055v-4.7244h0v-4.7244m-47.2441 9.4488v3.7795h0v3.7795m7.5591-7.559v3.7795h0v3.7795m0 0H65.6418m-.0001 0v5.6693h0v5.6693m-3.7796-11.3386v5.6693h0v5.6693m-7.5592-11.3386v5.6693h0v5.6693" fill="none"/>
            <path d="M59.9725 160.1299h37.7953v22.6772H59.9725z" class="A"/>
            <text class="B C D F"><tspan x="62.9725" y="166.2485">Skeletal </tspan><tspan x="62.9725" y="173.4485">muscles</tspan></text>
            <path d="M59.9725 185.0866h37.7953v22.6772H59.9725z" class="E"/>
            <path d="M59.9725 202.7648h37.7953v15.1181H59.9725zm109.7262 0h37.7953v15.1181h-37.7953z" class="A"/>
            <text class="B C D F"><tspan x="78.8701" y="191.2052">Voluntary</tspan><tspan x="78.8701" y="198.4052">control</tspan><tspan x="191.9725" y="209.2052">Involuntary</tspan></text>
            <path d="M187.4739 229.7959h22.6772v15.1181h-22.6772z" class="E"/>
            <path fill="none" d="M82.6497 205.4944v-7.5591h0v-7.559M191.9725 205.4944v-7.5591h0v-7.559M82.6497 234.274v-7.5591h0v-7.559M191.9725 234.274v-7.5591h0v-7.559" fill="none"/>
            <path d="M146.9016 160.1299h49.1339v22.6772h-49.1339zm-41.5748 0h37.7953v22.6772h-37.7953z" class="E"/>
            <path fill="none" d="M169.5787 143.122v3.7796h0v3.7795"/>
            <text class="B C D F"><tspan x="107.3268" y="166.2485">Sympathetic </tspan><tspan x="107.3268" y="173.4485">nervous </tspan><tspan x="107.3268" y="180.6485">system</tspan><tspan x="148.9016" y="169.8485">Parasympathetic </tspan><tspan x="148.9016" y="177.0485">nervous system</tspan></text>
            <path d="M78.8701 131.7835v-3.7796h0v-3.7795m92.5984 35.9055v-4.7244h0v-4.7244m-47.2441 9.4488v3.7795h0v3.7795m7.5591-7.559v3.7795h0v3.7795m0 0H65.6418m-.0001 0v5.6693h0v5.6693m-3.7796-11.3386v5.6693h0v5.6693m-7.5592-11.3386v5.6693h0v5.6693" fill="none"/>
            <path d="M59.9725 160.1299h37.7953v22.6772H59.9725z" class="A"/>
            <text class="B C D F"><tspan x="62.9725" y="166.2485">Skeletal </tspan><tspan x="62.9725" y="173.4485">muscles</tspan></text>
            <path d="M59.9725 185.0866h37.7953v22.6772H59.9725z" class="E"/>
            <path d="M59.9725 202.7648h37.7953v15.1181H59.9725zm109.7262 0h37.7953v15.1181h-37.7953z" class="A"/>
            <text class="B C D F"><tspan x="78.8701" y="191.2052">Voluntary</tspan><tspan x="78.8701" y="198.4052">control</tspan><tspan x="191.9725" y="209.2052">Involuntary</tspan></text>
            <path d="M187.4739 229.7959h22.6772v15.1181h-22.6772z" class="E"/>
            <path fill="none" d="M82.6497 205.4944v-7.5591h0v-7.559M191.9725 205.4944v-7.5591h0v-7.559M82.6497 234.274v-7.5591h0v-7.559M191.9725 234.274v-7.5591h0v-7.559"/>
        </svg>
    </div>

SVG Default Dimensions

When one includes an SVG element in an HTML document without specifying the width and height attributes, the default dimensions of the SVG are determined by the browser. Here’s how it typically works:

  1. Intrinsic Dimensions: If the SVG element has intrinsic dimensions (defined within the SVG content itself, like in the viewBox attribute), the browser will use these dimensions.
  2. Container Context: If there are no intrinsic dimensions, the browser will render the SVG at 300px wide by 150px high. These are the default width and height values as per the SVG specification.

SVG Scaling Example

SVG with viewBox="0 0 100 100"

  • This SVG has a viewBox of "0 0 100 100" and a width and height of 200x200 pixels.
  • The circle's cx (center x-coordinate) and cy (center y-coordinate) are both 50, and r (radius) is 40.
  • The circle will appear large and fill most of the 200x200 viewport.

SVG with viewBox="0 0 1000 1000"

  • This SVG has a viewBox of "0 0 1000 1000" and a width and height of 200x200 pixels.
  • The circle's cx and cy are both 500, and r is 40.
  • The circle will appear much smaller because it’s fitting a 1000x1000 coordinate space into the same 200x200 viewport.

SVG with viewBox="0 0 50 50"

  • This SVG has a viewBox of "0 0 50 50" and a width and height of 200x200 pixels.
  • The circle's cx and cy are both 50, and r is 40.
  • Consequently, only a quarter of the circle is visible within the viewBox, appearing as if the circle is cut off at the edges. The rest of the circle extends beyond the viewBox but is not displayed because it's outside the defined coordinate system.
  • With a viewBox of "0 0 50 50" and an SVG element size of 200x200 pixels, the quarter of the circle appears larger than its original size within the viewBox.

SVG with Changed Width and Height (viewBox="0 0 100 100")

  • This SVG has a viewBox of "0 0 100 100" but a larger width and height of 350x350 pixels.
  • The circle's cx and cy are both 50, and r is 40.
  • The circle will appear larger because the viewport is now 350x350 pixels, allowing more space for the same 100x100 coordinate space.

SVG with Changed Width and Height (viewBox="0 0 1000 1000")

  • This SVG has a viewBox of "0 0 1000 1000" and a larger width and height of 350x350 pixels.
  • The circle's cx and cy are both 500, and r is 40.
  • The circle will appear smaller compared to the 100x100 viewBox example, but larger than in the 200x200 viewBox example because the viewport has increased to 350x350 pixels, providing more space for the 1000x1000 coordinate space.

In conclusion, to maintain the size of the elements within an SVG, one should ensure that the viewBox width and height remain proportional to the width and height attributes of the SVG element. Adjusting the viewBox values changes how the SVG content is scaled to fit into the viewport, leading to either a zooming in or zooming out effect. Changing the width and height attributes of the SVG element directly affects the size of the rendered content, making it larger or smaller depending on the specified dimensions.

The circle element's attributes cx, cy, and r define its position and size within the coordinate system defined by the viewBox. The cx and cy attributes specify the center of the circle, while the r attribute specifies the radius. Changes to the viewBox and the SVG element's dimensions affect how these values are scaled and rendered within the viewport.

Comments

Post a Comment

Popular posts from this blog

Neat-Flappy Bird (Second Model)

NEAT (NeuroEvolution of Augmenting Topologies) was introduced in the field of artificial intelligence in 2002 by Kenneth O. Stanley and Risto Miikkulainen. NEAT is an evolutionary algorithm designed to evolve artificial neural networks with complex structures and behaviors. Unlike traditional neural network training methods, NEAT evolves both the weights of connections and the structure of the network itself, allowing for the emergence of increasingly sophisticated solutions to complex problems. It starts with a population of simple networks and gradually evolves them over generations, favoring networks that perform better at the task at hand. NEAT's ability to dynamically adjust neural network architectures, allowing for the addition and removal of nodes and connections, makes it particularly effective in solving problems where the optimal network structure is not known in advance. The technology has found applications in various fields, including gaming, robotics, ...
Read more

Exploring Memory Components: A Metaphorical Journey

In the intricate landscape of computer architecture, memory components play a pivotal role, akin to the gears in a well-oiled machine. Understanding these components not only unveils the inner workings of computing systems but also offers insights into the fundamental principles of data storage and retrieval. DRAM (Dynamic Random Access Memory): Imagine DRAM as a bustling office desk: Temporary Workspace: DRAM acts as a temporary workspace where the CPU swiftly manages tasks, akin to an office desk where workers handle immediate tasks. Fast Access: Just as workers quickly access their desk, the CPU swiftly reads from or writes to DRAM, essential for efficient system performance. Volatile Nature: Like a desk cleared at day's end, DRAM is volatile, losing contents when the computer powers off, requiring constant power to retain data. Random Access: Workers access any part of their desk freely, akin to DRAM allowing the CPU to quickly access any memory loca...
Read more

The Evolution of Programming Language Syntax

The evolution of programming language syntax has been marked by a continuous quest to enhance the efficiency, readability, maintainability and scalability of code. This journey reflects significant advancements in computer science, improvements in hardware, and evolving software development methodologies. By examining key stages in this evolution, people can appreciate the transformative impact each generation of programming languages has had on the way software is developed. Early Machine and Assembly Languages (1940s-1950s) Machine Language: In the infancy of computing, programming was done directly in machine language, a series of binary instructions that a computer's hardware could execute. Each instruction consisted of a sequence of bits (0s and 1s), which directly controlled the hardware's operations. For example, an instruction might command the processor to load a value into a register, perform arithmetic operations, or jump to a different memory address based on ce...
Read more