SVG Antibody - Antigen

Posted by Laura Johnston SVG 2015

Please note, this may not work in all browsers or devices.

Hide the antigen.

You may need to double click the button in order for it to function.

SVG - Scalable Vector Graphic. Wikipedia offers a great explanation as to what SVG are.  In a nut shell, they are images that can be fiddle around with on a web page and can be resized without losing their shape.   This was my first attempt in creating an interactive SVG.  

Antibody what's what

Light chainvariable region Antigen Light chain constant region Heavy chain variable region Antigen binding reagion Heavy chainconstant region

SVG Tips:

  • Keep it simple as possible to start
  • While creating your image, make sure to name each path/piece as you go
  • Review the image often on a web browser
  • If you are using a program like Illustrator, make sure to clean up any stray points (usual affair)
  • There are a lot of resources out there. You can even simply start out by creating a SVG imgae using a text editor.
    • <svg width="50" height="50"> <circle cx="25" cy="25" r="20" stroke="red" stroke-width="4" fill="black" /></svg>
    • Result
    • http://www.w3schools.com/svg/
  • Trip to scale the SVG:
    • <script> function setScale(scale) { document.getElementById('SVG ID').setAttribute("transform", 'scale(' + scale + ')'); }</script>
    • Button: onClick="setScale(2);
    • Make sure original SVG is set to currentScale="1"
  • Other references that I used during the creation of the SVG
    • Octocat SVG
    • http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
    • http://codepen.io/gc-nomade/pen/pLzxc
    • https://css-tricks.com/using-svg/

Creating the SVG image was an interesting process. The ability to apply to add animation and interactivity are what make SVG images interesting. Will I be switching to SVG images; probably not any time soon. However, as with most things, a little bit here and there is a good thing.

Send a comment